O que fazer com meu sistema?

Como você, caro leitor, deve saber, o Flash foi descontinuado de forma pesada e forte em 2021. E não adianta xingar, ficar irritado, ou gritar com a Adobe. O fato é que o ambiente ficou insustentável para a plataforma e correções foram abandonadas já a alguns anos e o suporte oficial também. Como o Flex foi uma plataforma extremamente forte em meados dos anos 2000, muitas aplicações, algumas nem tão antigas assim, e extremamente robustas, foram construídas em cima dele. Isso fez com que, mesmo diante de tanto aviso, muitas desenvolvedoras e desenvolvedores acabaram por não ter condições de desenvolver novas soluções completas que compensassem o fim da tecnologia. Por isso, para ajudar, vou sugerir duas soluções, uma de médio e outra de curto prazo, que pode auxiliar a você resolver seus problemas e continuar mantendo um suporte até ter condições de desenvolver uma solução definitiva.

Solução 1 – Médio Prazo

Em 2011, a Adobe doou o Flex para o Apache, então, desde 2014-2016, eles trabalharam em uma forma de portar o Flex para JS, através do FlexJS. Porém, o projeto do Flex não morreu, ele foi convertido para o Apache Royale. Essa pode ser uma solução a médio prazo para a maioria de vocês que estão tendo essa dificuldade. Pode ser uma solução em curto prazo também, se seu projeto foi bem desenvolvido. Ele usa MXML e AS3 e transpila para Javascript e HTML5 ao invés de Flash.

A página do Apache Royale, junto com seus links, pode ser encontrada aqui:

Solução 2 – CurtoPrazo

O Adobe AIR permite executar Flash em plataforma desktop. Ele teve seus esforços transferidos para o HARMAN, em 2019, uma empresa da SAMSUNG. Você pode simplesmente compilar sua aplicação Flex baixando o SDK do AIR através do link abaixo:

Basta aceitar os termos e baixar. A plataforma continuará sendo mantida pela empresa. Porém, é necessário ficar atento a licença. Em geral, para a maioria dos usuários, a licença gratuita resolverá e sua dependência é por valor de receita.

Update – Solução 3 – Ruffle

Uma solução que tem tudo para ser permanente e até, quem sabe, dar uma sobrevida ao Flash, é o Ruffle. O Ruffle é um emulador de flash player construído em Rust, que pode ser usado para animações e aplicações. O mais legal é que ele pode ser usado não apenas em seu servidor, mas como extensão do navegador ou para quem possui aplicações desktop e não queiram usar o Adobe AIR da HARMAN.

OBS: Eu não tenho NADA a ver com a Adobe, nem a Harman, mas trabalhei por muitos anos com a plataforma Flex e compreendo sua enorme importância e contribuição para o que temos hoje em termos de front-end e UX. Estou postando isso apenas para ajudar.

Caso eu saiba de mais alguma solução, eu vou atualizar este poste. Fica de olho no Facebook / Instagram ou no grupo, que eu sempre atualizo as coisas por lá.

Habilitando e Instalando o Subsistema

Primeiro certifique-se que está usando a versão mais recente do Windows 10. Apesar do susbsistema Linux estar disponível há alguns anos, é interessante manter sempre sua máquina atualizada.

Clique em iniciar e digite Ativar ou Desativar Recursos do Windows, ou acesse a partir do Painel de Controle Clássico.

Ao abrir, desça a barra de rolagem até encontrar a opção Subsistema Linux para Windows. Ative a caixa e pressione em OK.

O Windows pedirá para reiniciar o sistema e fará alguns ajustes, para então permitir que você possa instalar uma distribuição Linux.

Uma vez reiniciado, você já pode fazer a instalação da distribuição. Para isso abra Microsoft Store. Na guia Pesquisar, pesquise por Linux. Uma grande opção contendo várias distribuições será mostrada a você.

Escolha a distribuição que melhor funcionar para você. Nesta demonstração iremos usar o Ubuntu, mas se você preferir uma distribuição baseada em outra distro, fique à vontade. Porém a integração do Ubuntu com o Windows é trabalhada em conjunto entre a Microsoft e a própria Canonical, o que deve garantir, teoricamente, uma integração melhor.

Para você trabalhar com o Subsistema Linux, você pode usar o próprio Prompt de Comando, ou o Power Shell, porém, a Microsoft lançou recentemente um Terminal para o Windows. Esse novo Terminal pode ser baixado diretamente pela Microsoft Store e é altamente recomendável seu uso, pois ele traz muitas melhorias para a usabilidade do WSL (Windows Subsystem Linux).

Para finalizar a instalação, simplesmente abra o Terminal e digite: ubuntu (ou o nome da distribuição que você escolheu) e aguarde a instalação. Ele pedirá para você criar uma conta de administrador e a senha.

Após instalar, se você fechar e abrir o Terminal, notará que apareceu mais uma opção para nova aba. Caso você prefira, você pode editar, em Settings, para que o Ubuntu seja o padrão, simplesmente alterando a configuração em seu json. Porém, se preferir, você também pode abrir o Ubuntu simplesmente digitando pelo OS a partir da barra de pesquisas, mas nesse caso ele abrirá o terminal dentro do console padrão do Windows.

Instalando o PHP e MySQL em seu Ubuntu Linux

A partir daqui não é diferente de instalar em um Ubuntu completo, porém, como a maioria dos usuários de Windows não possui familiaridade com os sistemas baseados em Linux, vamos detalhar passo a passo.

Obs: Se você quiser copiar o código aqui digitado, você pode digitar ctrl+c aqui e, no terminal, apenas clicar com o botão direito (esta ação será equivalente ao ctrl+v).

Antes de tudo, vamos dar um update para preparar o ambiente.

sudo apt-get update

Instalando o Apache 2

Para instalar o servidor do Apache, e verificar se a instalação está correta, simplesmente use os comandos abaixo, no Terminal:

sudo apt-get install apache2
sudo service apache2 start
sudo service apache2 status

Ao iniciar o apache, é possível que você receba a seguinte mensagem:

Windows TerminalProtocol not available: AH00076: Failed to enable APR_TCP_DEFER_ACCEPT

Não se preocupe com esse problema. Simplesmente esse protocolo ainda não está nativamente implementado no WSL. Você pode apenas ignorar ou adicionar as seguintes linhas no arquivo /etc/apache2/apache2.conf :

AcceptFilter https none
AcceptFilter http none

Instalando o PHP

Instalaremos o PHP 7.4 (então versão mais atual na última atualização deste post), mas você pode utilizar qualquer tutorial para Ubuntu para outras versões, ou simplesmente trocar os caminhos aqui associados. Atualizaremos este post conforme forem surgindo novas atualizações. Digite Y (yes) para tudo o que for perguntado.

sudo apt-get update
sudo apt-get install php php-cli php-fpm php-json php7.4-pdo php7.4-mysql php-zip php-gd  php-mbstring php-curl php-xml php-pear php-bcmath
php -v

Instlamos, assim, o cliente e os pacotes mais utilizados, mas você pode, futuramente, instalar pacotes adicionais para funções específicas. A terceira linha apenas verifica a versão do PHP instalada, para checar se está tudo correto.

Instalando o MySQL

Por último vamos instalar o MySQL. Você pode trabalhar com outros bancos de dados se quiser, basta, como dito anteriormente, usar qualquer tutorial para Ubuntu (ou a distro que você escolheu), pois, relembrando, o WSL é realmente um subsistema Linux instalado e integrado ao Windows. Ele não é uma máquina virtual ou emulação. Lembre-se de pressionar o Y, quando perguntado.

sudo apt-get install mysql-server mysql-client libmysqlclient-dev
sudo service mysql start

Caso perguntado, você pode ou não definir uma senha para o root do MySQL. Como você está em um ambiente de desenvolvimento, isso não é importante por hora. Mas lembre-se que em ambientes de produção uma senha forte deve ser usada.

Garantindo todos os privilégios para usuário administrador

Para você poder gerenciar todos os bancos e não ter que criar um usuário para cada um, você pode criar um usuário administrador e facilitar seu trabalho. Use o código abaixo para acessar o cliente mysql. Use a senha criada anteriormente.

sudo mysql -u root -p

Agora, use o código abaixo para criar o usuário administrador e você poder trabalhar de forma universal.

CREATE USER 'nome_de_usuario'@'localhost' IDENTIFIED BY 'sua_senha';
GRANT ALL PRIVILEGES ON *.* TO 'nome_de_usuario'@'localhost';

Digite \q para sair do cliente.

PHPMyAdmin

Você pode usar algum cliente externo para administrar o MySQL, mas a opção mais comum usada é instalar o PHPMyAdmin. Simplesmente utilize o seguinte comando:

sudo apt-get install phpmyadmin

Obs. A instalação irá perguntar se deseja instalar apache ou nginx, neste caso marque apache. Para marcar pressione espaço, se não fizer isso ele não instalará corretamente e você precisará rodar a instalação novamente.

Durante a instalação, você será questionado para criar uma senha para o PHPMyAdmin, caso deseje.

Testando

Uma vez que já instalamos e já inicializamos, podemos testar simplesmente acessando http://localhost. Para o PHPMyAdmin, use http://localhost/phpmyadmin

Para entrar no PHPMyAdmin, utilize o usuário e senha criado acima, com os privilégios:

Habilitando as configurações do Apache

Para poder funcionar corretamente certas opções, como o habilitar .htaccess, habilitar ou desabilitar determinados módulos, configurar max_*, etc., é ideal que você configure o Apache Virtual Hosts.

sudo bash -c "a2ensite '*.conf' && a2dissite 000-default.conf default-ssl.conf && systemctl restart apache2.service"

Feito isso, você pode configurar o VirtualHost para diversos sites, portas, ou simplesmente especificando configurações específicas para cada site / sistema em que você está trabalhando.

O arquivo de configuração gerado, fica em: /etc/apache2/sites-available/000-default.conf

Informações Importantes

Você pode iniciar o apache e o mysql a qualquer momento, simplesmente abrindo o Windows Terminal, no Ubuntu (ou direto pelo app Ubuntu) e colocando:

sudo service apache2 start
sudo service mysql start

A pasta padrão dos arquivos do Apache é:
/var/www/html

Para você abrir a pasta no Windows Explorer e você ver o os arquivos, digite no Terminal:

cd /var/www/html/
explorer.exe .

Recomendo que, para você poder operar sem problemas, no Windows, você execute, para dar permissão total:

sudo chmod -R 777 /var/www/html/

Extra: Criando um SSL autoassinado

Dependendo do que você estiver programando, pode ser necessário você utilizar uma conexão SSL. Isso geralmente é necessário em testes que irão alimentar diversas APIs ou até para utilizar alguns recursos do HTML5.

O Ubuntu já possui o openssl instalado nativamente no sistema. Então, basta você colocar:

sudo openssl req -x509 -nodes -days 365 -newkey rsa:2048 -keyout /etc/ssl/private/apache-selfsigned.key -out /etc/ssl/certs/apache-selfsigned.crt

Enquanto você estiver criando o certificado, ele irá fazer algumas perguntas de identificação. Como é algo que vai ser usado localmente, essas informações não precisam ser reais ou fidedignas, basta responder. A ordem é:

• Nome de País (em código de 2 dígitos) – Brasil é BR
• Estado
• Cidade
• Nome da Organização
• Unidade da Organização
• Common Name – Digite localhost
• E-mail – Digite webmaster@localhost

Isso vai ser suficiente para criar um certificado auto-assinado, que vai funcionar localmente.

Agora vamos nas configurações do Virtual Hosts do Apache, para SSL.

sudo nano /etc/apache2/conf-available/ssl-params.conf

Dentro do arquivo, cole o seguinte texto (é uma configuração genérica, mas suficiente para nosso caso):

SSLCipherSuite EECDH+AESGCM:EDH+AESGCM:AES256+EECDH:AES256+EDH
SSLProtocol All -SSLv2 -SSLv3 -TLSv1 -TLSv1.1
SSLHonorCipherOrder On
# Disable preloading HSTS for now.  You can use the commented out header line that includes
# the "preload" directive if you understand the implications.
# Header always set Strict-Transport-Security "max-age=63072000; includeSubDomains; preload"
Header always set X-Frame-Options DENY
Header always set X-Content-Type-Options nosniff
# Requires Apache >= 2.4
SSLCompression off
SSLUseStapling on
SSLStaplingCache "shmcb:logs/stapling-cache(150000)"
# Requires Apache >= 2.4.11
SSLSessionTickets Off

Obs. Digite CTRL+X, seguido de Y, seguido de ENTER, para fechar o nano, salvando.

Agora vamos editar a configuração do SSL.

sudo nano /etc/apache2/sites-available/default-ssl.conf

Com o arquivo aberto, você vai substituir os parâmetros abaixo, de acordo com o demonstrado na lista:

ServerAdmin webmaster@localhost.com
ServerName localhost

SSLCertificateFile /etc/ssl/certs/apache-selfsigned.crt
SSLCertificateKeyFile /etc/ssl/private/apache-selfsigned.key

Por fim, basta colocar no terminal, para ativar o ssl no Apache:

sudo a2enmod ssl
sudo a2enmod headers
sudo a2ensite default-ssl
sudo a2enconf ssl-params
sudo apache2ctl configtest

Se estiver tudo configurado corretamente, ele vai responder SINTAX OK.

Antes de recarregar o Apache, teremos que liberar a pasta onde salvamos o certificado. Vamos liberar para 777, para facilitar, apenas porque estamos em ambiente de desenvolvimento. JAMAIS FAÇA ISSO EM AMBIENTE DE PRODUÇÃO.

sudo chmod -R 777 /etc/ssl/private
service apache2 reload

Por fim, precisamos adicionar o SSL como confiável no Windows. Caso contrário, ao entrar em https://localhost, você vai receber aquela clássica tela de certificado não confiável.

Agora vá até a pasta onde você baixou o certificado e abra a pasta no explorer. Procure pelo arquivo do certificado apache-selfsigned.crt. Clique duas vezes nele para instalar no Windows.

cd /etc/ssl/certs/ 
explorer.exe .

Ao abrir o certificado, clique no botão Instalar Certificado

Simplesmente siga os passos para a instalação do certificado

Na área de Importação, selecione para colocar no repositório de Autoridades de Certificações Confiáveis, como nas imagens abaixo.

Você vai precisar confirmar a instalação do certificado. Marque Sim.

Agora é só acessar o localhost com https e ser feliz!

Porém, para o trabalho mais básico, um simples link de interação com um início de conversa, a documentação não é muito clara quanto a caracteres especiais e links.

Criando um link para iniciar a conversa

Para você criar um link para iniciar uma conversa, basta usar a URL https://api.whatsapp.com/send e passar os parâmetros específicos.

Na prática, você poderia passar algo como:

<a href="https://api.whatsapp.com/send?phone=telefonecompleto&text=TextoParaEnviar">Enviar Mensagem</a>

Importante: O telefone deve conter DDI e DDD e ser apenas número. Por exemplo, você vai mandar uma mensagem para alguém de Recife/PE – Brasil, o telefone precisa ser: 5581numero_do_celular.

Até aí é bem simples. O problema está quando você quer enviar um parâmetro em um link, ou quando você quer enviar caracteres especiais como quebra de texto. O que vai acontecer é que a API do Whatsapp simplesmente irá remover qualquer tipo de código que ele considerar inseguro, através de um processo chamado de Sanitização.

O Whatsapp, entretanto, utiliza-se de uma versão própria de parâmetros simples para tratar richtexts. Ou seja, simplesmente basta você converter os valores que você quer para URL Encode. Isso fará com que o texto seja entregue da forma como você planejou e você possa aplicar caracteres especiais e formatação.

Exemplo prático

Digamos que você queira enviar a seguinte mensagem:

A pia pinga, o pinto pia…
Quanto mais a pia pinga, mais o pinto pia.

Acesse https://ratimbum.com/?token=333 para saber mais.

Perceba que o texto possui negrito e quebra de texto e seu código será algo como:

A pia pinga, o pinto pia...\n
Quanto mais a pia pinga, mais o pinto pia.\n\n
Acesse https://ratimbum.com/?token=333 para saber mais.

Sim, você deverá usar \n para quebrar o texto. Porém, a sanitização vai retirar o \n e o ?, o que vai criar um resultado não esperado.

Para resolver o problema, basta você converter o texto para URL Encode. No javascript, por exemplo, ficará assim:

var texto = "A pia pinga, o pinto pia...\n
Quanto mais a pia pinga, mais o pinto pia.\n\n
Acesse https://ratimbum.com/?token=333 para saber mais.";
texto = window.encodeURIComponent(texto);

/*
O resultado será algo como:
A%20pia%20pinga%2C%20o%20pinto%20pia...%0A%0AQuanto%20mais%20a%20pia%20pinga%2C%20mais%20o%20pinto%20pia.%0A%0AAcesse%20https%3A%2F%2Fratimbum.com%2F%3Ftoken%3D333%20para%20saber%20mais.
*/

Dessa forma, você pode optar por colocar esse código dinamicamente em um <a> ou, o que recomendo, enviar através da função window.open, do Javascript.

function enviarMensagem(){
	var celular = "55DDDNUMERODOCELULAR";
  
  var texto = "Texto que eu vou enviar \n com quebras de \n texto.";
  texto = window.encodeURIComponent(texto);
  
  window.open("https://api.whatsapp.com/send?phone=" + celular + "&text=" + texto, "_blank");
	//Obs.. use "_system", no lugar de blank, caso você esteja usando Phonegap / Cordova / Ionic ou qualquer um baseado em webview;
}

Obs. Você não precisa converter para \n se for pegar o texto a partir de um <textarea>, como mostrado no exemplo mais abaixo.

É importante salientar que se você estiver testando no Whatsapp web, a quebra de linha não é mostrada na pre-visualização, mas será mostrada no momento do envio real da imagem.

Corrigindo erro ERR_BLOCKED_BY_RESPONSE

Foi relatado que, em alguns casos, ocorre o erro ERR_BLOCKED_BY_RESPONSE, em alguns navegadores ou condições específicas (principalmente no Firefox). Isso ocorreu devido a algumas atualizações não bem descritas da API do Whatsapp.

Para corrigir esse problema, faremos uma pequena atualização no código acima, o qual será necessário verificar se é mobile ou não, e passar o prefixo web no lugar de api. Acredito que também exista uma correlação quanto a navegadores desatualizados, que estejam causando o problema.

function enviarMensagem(){
	var celular = "55DDDNUMERODOCELULAR";
  
  var texto = "Texto que eu vou enviar \n com quebras de \n texto.";
  texto = window.encodeURIComponent(texto);

  let urlApi = "https://web.whatsapp.com/send";
  if(mobileCheck()){
  	urlApi = "https://api.whatsapp.com/send";
  }
  
  window.open(urlApi + "?phone=" + celular + "&text=" + texto, "_blank");
	//Obs.. use "_system", no lugar de blank, caso você esteja usando Phonegap / Cordova / Ionic ou qualquer um baseado em webview;
}


function mobileCheck(){
  let check = false;
  (function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))) check = true;})(navigator.userAgent||navigator.vendor||window.opera);
  return check;
}

Ocorre também que o código questão modifica um comportamento. Ele não mais alertará o usuário de que uma mensagem será enviada. Ao contrário disso, ele já abre direto no Whatsapp web.

Outras opções

Se o intuito, porém, for utilizar também outras propriedades do richtext, como negrito e itálico, você deverá simplesmente passar _ (itálico), * (negrito), ~ (riscado) ou “` (tamanho fixo). Exemplo:

var mensagemParaWpp = mensagem.replace(/<b>/g, "*").replace(/<\/b>/g,"*"); 
alert(s);

Como sempre, no final do post tem um código de exemplo, onde você pode testar o envio de mensagem ou apenas copiar o código.

(O código está compartilhado pelo jsfiddle. Então, para ver corretamente, use pelo desktop/laptop)

Gostou da postagem? Siga nossas mídias sociais e compartilhe com os coleguinhas.

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

HTML

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

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

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

CSS3

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Javascript

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

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

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

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

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

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

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

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

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

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

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

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

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

PHP

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

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

$ret = [];

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

echo json_encode($ret, JSON_PRETTY_PRINT);
?>

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

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

Importância

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

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

Esboços ou Sketchs

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

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

Wireframes

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

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

Mockups

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

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

Human Interface Guidelines

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

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

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

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

UI Kits

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

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

Protótipo

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

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

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

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

Concluindo

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

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

Exemplo

HTML

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

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


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

CSS

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

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

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

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

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

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

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

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

Javascript

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

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

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

Simples não é?

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

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

O HTML5 nos trouxe diversas opções interessantes para desenvolvimento de RIAs (Rich Internet Applications). Em diversos sistemas online, precisamos de uma foto da pessoa que está sendo cadastrada. Para sistemas de hotéis, saúde, academias, dentre outros, que precisam de maior identificação, podemos usar a webcam para fazer a foto na hora que poderá ser usada em posterior conferência. Recurso esse que também está disponível em dispositivos móveis.

A ideia é transformar a imagem corrente da webcam em uma imagem base64. Após isso, converter essa codificação em uma imagem JPG e devolver o caminho – quase como se fosse um upload. Dessa forma você poderá salvar apenas o caminho da imagem no seu banco de dados, sem ficar um campo muito extenso ou que possa falhar em dispositivos móveis. Neste exemplo, será usado Javascript puro, a fim de universalizar para quem quiser utilizar em sua aplicação web.

Exemplo:

Clique aqui para visualizar a Webcam

Tirar foto e salvar

HTML5

Vamos começar criando nosso exemplo com os elementos HTML. Tudo o que realmente precisamos é de uma tag button e uma tag video, mas para poder visualizar o exemplo, vamos colocar o retorno em um img, link da imagem gerada e um textarea para vermos o base64.

<div class="area">
			<video autoplay="true" id="webCamera">
			</video>
	
			<input type="text" id="base_img" name="base_img">
			<button type="button" onclick="takeSnapShot()">Tirar foto e salvar</button>
	
			<img id="imagemConvertida">
			<p id="caminhoImagem" class="caminho-imagem"><a href="" target="_blank" rel="noopener"></a></p>
			<script src="script.js"></script>
</div>

Não precisamos necessariamente de um CSS para poder funcionar, mas, apenas para exemplo, vamos colocar um CSSzinho…

body{
	font-family: sans-serif;
	margin: 0;
}

.area{
	margin: 10px auto;
	box-shadow: 0 10px 100px #ccc;
	padding: 20px;
	box-sizing: border-box;
	max-width: 500px;
}

.area video{
	width: 100%;
	height: auto;
	background-color: whitesmoke;
}

.area textarea{
	width: 100%;
	margin-top: 10px;
	height: 80px;
	box-sizing: border-box;
}

.area button{
	-webkit-appearance: none;
	width: 100%;
	box-sizing: border-box;
	padding: 10px;
	text-align: center;
	background-color: #068c84;
	color: white;
	text-transform: uppercase;
	border: 1px solid white;
	box-shadow: 0 1px 5px #666;
}

.area button:focus{
	outline: none;
	background-color: #0989b0;
}

.area img{
	max-width: 100%;
	height: auto;
}

.area .caminho-imagem{
	padding: 5px 10px;
	border-radius: 3px;
	background-color: #068c84;
	text-align: center;
}

.area .caminho-imagem a{
	color: white;
	text-decoration: none;
}

.area .caminho-imagem a:hover{
	color: yellow;
}

Javascript

Agora vamos para a parte divertida. Basicamente vamos dividir nosso código em 3 partes: Chamar a webcam, tirar o instantâneo, e enviar/receber os dados do PHP. Criaremos o arquivo script.js.

A função LoadCamera, irá transformar a webcam em uma espécie de streamming local. Para isso, é necessário que o navegador tenha suporte a isso, logo, precisamos de um navegador moderno com total compatibilidade a HTML5. Basicamente, todos os navegadores modernos, então não pense em compatibilidade com Internet Explorer.

function loadCamera(){
	//Captura elemento de vídeo
	var video = document.querySelector("#webCamera");
		//As opções abaixo são necessárias para o funcionamento correto no iOS
		video.setAttribute('autoplay', '');
	    video.setAttribute('muted', '');
	    video.setAttribute('playsinline', '');
	    //--
	
	//Verifica se o navegador pode capturar mídia
	if (navigator.mediaDevices.getUserMedia) {
		navigator.mediaDevices.getUserMedia({audio: false, video: {facingMode: 'user'}})
		.then( function(stream) {
			//Definir o elemento vídeo a carregar o capturado pela webcam
			video.srcObject = stream;
		})
		.catch(function(error) {
			alert("Oooopps... Falhou :'(");
		});
	}
}

Você deve ter notado que a função acima tem um comentário com alguns parâmetros adicionais. Esses parâmetros são necessários para o funcionamento no iOS.

Já a função takeSnapShot irá justamente tirar o instantâneo. Essa função irá criar um elemento canvas e desenhar em seu conteúdo uma imagem matricial, baseada no vídeo (um ctrl+c / ctrl+v automático, digamos assim). A partir daí podemos obter o base64 desse canvas e utilizá-lo para enviar posteriormente.

function takeSnapShot(){
	//Captura elemento de vídeo
	var video = document.querySelector("#webCamera");
	
	//Criando um canvas que vai guardar a imagem temporariamente
	var canvas = document.createElement('canvas');
	canvas.width = video.videoWidth;
	canvas.height = video.videoHeight;
	var ctx = canvas.getContext('2d');
	
	//Desenhando e convertendo as dimensões
	ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
	
	//Criando o JPG
	var dataURI = canvas.toDataURL('image/jpeg'); //O resultado é um BASE64 de uma imagem.
	document.querySelector("#base_img").value = dataURI;
	
	sendSnapShot(dataURI); //Gerar Imagem e Salvar Caminho no Banco
}

Você pode, inclusive, se quiser, já adicionar essa base64 em no src de um elemento img.

Agora, precisamos enviar essa base64 para o PHP. Usaremos o PHP para salvar a imagem em um arquivo jpg (você pode optar por png também). O PHP irá retornar, posteriormente, um json com o caminho completo da imagem, que iremos carregar no objeto img descrito no HTML supracitado. Faremos isso dinamicamente, por técnica de Ajax, sem formulário, pois o submit de um form poderá ser usado futuramente para a conclusão de um determinado cadastro:

function sendSnapShot(base64){
var request = new XMLHttpRequest();
request.open('POST', 'save_photos.php', true);
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
<pre><code>    request.onload = function() {
        console.log(request);
        if (request.status >= 200 && request.status < 400) {
            //Colocar o caminho da imagem no SRC
            var data = JSON.parse(request.responseText);

            //verificar se houve erro
            if(data.error){
                alert(data.error);
                return false;
            }

            //Mostrar informações
            document.querySelector("#imagemConvertida").setAttribute("src", data.img);
            document.querySelector("#caminhoImagem a").setAttribute("href", data.img);
            document.querySelector("#caminhoImagem a").innerHTML = data.img.split("/")[1];
        } else {
            alert( "Erro ao salvar. Tipo:" + request.status );
        }
    };

    request.onerror = function() {
        alert("Erro ao salvar. Back-End inacessível.");
    }

    request.send("base_img="+base64); // Enviar dados</code></pre>
<p>}

PHP

No lado do PHP, basicamente, usaremos um $_POST para capturar o dado enviado via Ajax pelo Javascript. Criaremos então o arquivo salvar_photos.php.

Não há muitos segredos, mas é importante se atentar a dois detalhes:

1. Os dados chegam com o + transformado em espaço, então precisamos converter novamente para + com um replace.
2. Precisamos salvar apenas os dados mime, sem os cabeçalhos, logo precisamos dar um explode para coletar apenas os dados.

Fora isso, basicamente colocamos os dados em um arquivo JPG e retornamos a URL em json para ser lido pelo Javascript novamente.

<?php
	if(!isset($_POST['base_img'])){
		die("{\"error\": \" Flopou. Cadê o base_img?\"}");
	}

	$result = [];
	$data = str_replace(" ","+",$_POST['base_img']); //O envio do dado pelo XMLHttpRequest tende a trocar o + por espaço, por isso a necessidade de substituir. 
	$name = md5(time().uniqid()); 
	$path = "snaps/{$name}.jpg";

	//data
	$data = explode(',', $data);
	
	//Save data
	file_put_contents($path, base64_decode(trim($data[1])));
	
	//Print Data
	$result['img'] = $path;
	echo json_encode($result, JSON_PRETTY_PRINT);
?>

Uma vez tudo pronto, basta chamar a função loadCamera() no evento que você quer que ele seja disparado.

Como sempre, deixamos o código disponível para quem quiser utilizar. Desta vez, o código está no GitHub.

ATENÇÃO: O navegador não vai liberar o uso das ferramentas em um ambiente http. Você precisa necessariamente estar com seu site ou sistema em conexão segura (https).

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

Detecção por Geolocalização

A forma mais simples e rápida de fazer isso, é através de uma API open-source online chamada Nekudo (https://geoip.nekudo.com/). O Nekudo não está mais disponível e virou IPI. Você precisa fazer um cadastro gratuito em https://ipapi.com/product e pegar sua chave e cadastrar o IP. Na dúvida de saber qual o IP do seu server, abra o seu prompt de comando (windows) ou terminal (Unix/Mac/Linux) e digite ping seusite.com.br.

A forma ideal de fazer isso é a partir da sugestão, ao invés do redirecionamento direto, como é feito no site da Apple e Adobe. Isso porque o usuário pode estar em viagem ou simplesmente preferir usar o conteúdo em outro idioma.

Vamos para a prática.

Javascript

Para facilitar, vamos usar um jQuery básico, que está presente em quase todos os sites e sistemas. Basta um “ajaxizinho” apenas para chamarmos a API do Geoplugin.

A URL https://api.ipapi.com/, seguido da chave e IP já devolve os dados em formato JSON. Como ele vai pegar o IP atual do usuário, não é necessário passar o IP:

var ip = "check";
var access_key = "minhachavedeacesso";
jQuery.ajax({
url:'https://api.ipapi.com/' + ip + '?access_key=' + access_key
dataType: "json",
success: function(data){
console.log(data);
}
});

O retorno então será:

Agora basta tratarmos o código para que execute uma ação e depois redirecione. Ficando assim:

var ip = "check";

var access_key = "minhachavedeacesso";
jQuery.ajax({
url: 'https://api.ipapi.com/' + ip + '?access_key=' + access_key,
dataType: "json",
success: function(data){
if(data.country.code != "BR"){
var redirecionar = confirm("Hi, visitor! We checked you are in " + data.country.name + ". Would you like to visit english version?");
}
if(redirecionar){
window.location = "https://meusite.com/en/";//outra url
}
}
});

Nesse ponto, apenas verificamos se não está no Brasil e ele vai redirecionar a página em questão.

Todavia, ele não vai guardar essa preferência. Logo, toda vez que a pessoa entrar no site, ela vai ter que responder a pergunta novamente. Mas para evitar que isso ocorra, podemos usar o localStorage. Garantindo assim que seja memorizada a opção e evitando que a API seja requerida desnecessariamente. O código final ficaria assim:

var ip = "check";

var access_key = "minhachavedeacesso";

//Verifica primeiro se já tem o country code salvo
if(localStorage.sel_country_code == undefined){
jQuery.ajax({
url: 'https://api.ipapi.com/' + ip + '?access_key=' + access_key
dataType: "json",
success: function(data){
if(data.country.code != "BR"){
var redirecionar = confirm("Hi, visitor! We checked you are in " + data.country.name + ". Would you like to visit english version?");
}
if(redirecionar){
//Gravar o country_code
localStorage.sel_country_code = data.country.code
window.location = "https://meusite.com/en/";//outra url
}
}
});
}else{
//Caso já esteja definido
window.location = "https://meusite.com/en/";//outra url
//Obs. Use o valor armazenado em localStorage.sel_country_code, caso você tenha mais de um outro idioma
}

Como saber se está funcionando?

Para testar, basta você usar um serviço de VPN. Você pode fazer isso através de algum site, programa ou simplesmente rodando pelo Opera, que já possui uma VPN própria e é ótimo mantê-lo instalado para testes. Recomendamos que você use o Opera, pois, além de ser um bom navegador, ele é mais seguro para evitar usar sites duvidosos ou serviços de terceiros. O Opera Developer é uma boa opção e possui VPN integrado. Clique na imagem para ser direcionado a página de download oficial.

Após instalar o Ópera, para habilitar o VPN, basta ir nas configurações, a partir do símbolo do O, no canto superior esquerdo.

Indo na guia Avançados > Recursos, ele vai retornar a primeira opção como VPN. Simplesmente a habilite.

Feito isso, a opção de VPN vai ficar visível e você poderá testar o funcionamento em diversos locais.

Ah, mas eu não quero redirecionar assim, quero que seja pelo servidor

Muito bem, digamos que você queira que o redirecionamento seja feito direto pelo servidor porque você é mal que nem um pica-pau. Sem problemas.

Para isso, você pode usar o cURL da sua linguagem de preferência e fazer o redirecionamento através dela. Aqui vai um exemplo mais comum, em PHP:

<?php

// IP e chave
$ip = $_SERVER['REMOTE_ADDR'];
$access_key = 'SUA CHAVE DE ACESSO';

// Inicializar CURL:
$ch = curl_init('http://api.ipapi.com/'.$ip.'?access_key='.$access_key.'');
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

// Capturar dados
$json = curl_exec($ch);
curl_close($ch);

// Decode JSON:
$retorno = json_decode($json, true);

if($retorno['country_code'] != "BR"){
header("location: https://seusite.com/idioma");
die();
}
?>

Lembrando que isso precisa ser inserido antes mesmo do doctype, pois se não pode retornar o erro de Headers Already Sent.

Concluindo

É bem simples testar o IP quanto a localização. Há diversos serviços, alguns pagos e outros gratuitos, que fazem esse tipo de redirecionamento. Também há plugins e extensões que você pode instalar em seu servidor, mas certamente a demonstrada aqui vai servir para a grande maioria dos projetos.

Curta e compartilhe

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

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

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

console.log("Oi Mundo");

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

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

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

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

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

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

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

Erros e Alertas

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

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

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

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

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

Identação

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

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

Tabelas

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

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

Calcular Tempo

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

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

}
console.timeEnd("calcularTempo");

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

Strings de Substituição

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

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

Por exemplo:

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

Concluindo

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

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

Star

Sobre o Projeto

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

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

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

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

Como Enviar E-mails?

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

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

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

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

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

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

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

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

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

Requerimentos

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

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

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

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

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

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

npm install nodemailer

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

npm install n-readlines

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

npx electron .

Pronto. Você agora já pode utilizar.

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

Follow @velhobit

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

Do Bit à Organização

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

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

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

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

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

O Consórcio Unicode

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

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

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

A Comunicação Social

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

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

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

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

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

E, Finalmente, os Emojis

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

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

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

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

A Aparência dos Emojis

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

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

Concluindo

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

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

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

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.

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.

• Material Design (Chrome OS e Android)
• Apple iOS
• Apple MacOS
• Fluent Design (Microsoft)

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.

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.

Caso você queira ver outros exemplos que usam cURL, acesse nosso tutorial sobre preenchimento automático de formulário com o CNPJ ou o tutorial sobre preenchimento automático de endereço a partir do CEP.

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.

$workspace = "d5b7e381-xxxx-xxxx-xxxx-xxxxxxxxxxxx";

$apikey = "xxxxxxxxxxxxxxxxx";

/*Antiga autenticação
$username = "cd27b34f-xxxx-xxxx-xxxx-xxxxxxxxxxxx";
$password = "Klxxxxxxxx";
*/

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

if (session_status() == PHP_SESSION_NONE) {
    session_start();
}
if(isset($_SESSION["identificador"])){
	$identificador = $_SESSION["identificador"];
}else{
	$identificador = md5(uniqid(rand(), true));
	$_SESSION["identificador"] = $identificador;
}

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.

$url = "https://gateway.watsonplatform.net/conversation/api/v1/workspaces/" . $workspace;
$urlMessage = $url . "/message?version=2017-05-26";

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.

$dados  = "{";
$dados .= "\"input\": ";
$dados .= "{\"text\": \"" . $texto . "\"},";
$dados .= "\"context\": {\"conversation_id\": \"" . $identificador . "\",";
$dados .= "\"system\": {\"dialog_stack\":[{\"dialog_node\":\"root\"}], \"dialog_turn_counter\": 1, \"dialog_request_counter\": 1}}";
$dados .= "}";

Como estamos tratando de json, devemos especificar o cabeçalho do tipo de dados que estamos enviando.

$headers = array('Content-Type:application/json');

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:

$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $urlMessage);
curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_POSTFIELDS, $dados);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
//curl_setopt($ch, CURLOPT_USERPWD, "$username:$password"); Autenticação antiga
curl_setopt($ch, CURLOPT_USERPWD, "apikey:$apikey")
curl_setopt($ch, CURLOPT_HTTPAUTH, CURLAUTH_BASIC);
$retorno = curl_exec($ch);
curl_close($ch);

Por fim, para facilitar a leitura, vamos imprimir o json na tela com uma organização mais legível para um ser-humano.

$retorno = json_decode($retorno);
echo json_encode($retorno, JSON_PRETTY_PRINT);

Com isso já poderemos ter uma resposta json, que, ao passar o texto, retornará algo similar como na imagem abaixo:

O código back-end completo fica (com comentários para ajudar a compreensão):

<?php
//Garantir que seja lido sem problemas
header("Content-Type: text/plain");

//Worskspace
$workspace = "d5b7e381-XXXX-XXXX-XXXX-XXXXXXXXXXXX";

/**
Antiga Autenticação
//Dados de Login
$username = "cd27b34f-XXXX-XXXX-XXXX-XXXXXXXXXXXX";
$password = "Kl8XXXXXXXXX";
**/
$apikey = "xxxxxxxxxxxxxxxxx";
//Capturar Texto
//Use $_POST em produção, por segurança
$texto = $_REQUEST["texto"];

//Verifica se existe identificador
//Caso não haja, crie um
if (session_status() == PHP_SESSION_NONE) {
    session_start();
}
if(isset($_SESSION["identificador"])){
	$identificador = $_SESSION["identificador"];
}else{
	//Você pode usar qualquer identificador
	//Você pode usar ID do usuário ou similar
	$identificador = md5(uniqid(rand(), true));
	$_SESSION["identificador"] = $identificador;
}

//URL da API
//(deve ser passado o método e a versão da API em GET)
$url = "https://gateway.watsonplatform.net/conversation/api/v1/workspaces/" . $workspace;
$urlMessage = $url . "/message?version=2017-05-26";

//Dados
$dados  = "{";
$dados .= "\"input\": ";
$dados .= "{\"text\": \"" . $texto . "\"},";
$dados .= "\"context\": {\"conversation_id\": \"" . $identificador . "\",";
$dados .= "\"system\": {\"dialog_stack\":[{\"dialog_node\":\"root\"}], \"dialog_turn_counter\": 1, \"dialog_request_counter\": 1}}";
$dados .= "}";

//Cabeçalho que leva tipo de Dados
$headers = array('Content-Type:application/json');

//Iniciando Comunicação cURL
$ch = curl_init();
//Selecionando URL
curl_setopt($ch, CURLOPT_URL, $urlMessage);
//O cabeçalho é importante para definir tipo de arquivo enviado
curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
//Habilitar método POST
curl_setopt($ch, CURLOPT_POST, 1);
//Enviar os dados
curl_setopt($ch, CURLOPT_POSTFIELDS, $dados);
//Capturar Retorno
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
//Autenticação
//curl_setopt($ch, CURLOPT_USERPWD, "$username:$password"); Autenticação antiga
curl_setopt($ch, CURLOPT_USERPWD, "apikey:$apikey")
curl_setopt($ch, CURLOPT_HTTPAUTH, CURLAUTH_BASIC);
//Executar
$retorno = curl_exec($ch);
//Fechar Conexão
curl_close($ch);

//Imprimir com leitura fácil para humanos
$retorno = json_decode($retorno);
echo json_encode($retorno, JSON_PRETTY_PRINT);

?>

Código do Front-End

Agora precisamos fazer a interação do usuário com o chatbot. Para isso, precisamos criar uma área do chat e o formulário que enviará os dados.

<div id="watson" class="watson">
	<div class="mensagens">
		<div class="area" id="chat">
		</div>
	</div>
	<form id="mensagem" class="mensagem">
		<input type="text" id="texto" name="texto" placeholder="Digite sua mensagem"/>
		<button type="submit">Enviar</button>
	</form>
</div>

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.

<style>
	.watson{
		border: 1px solid #B0BEC5;
		border-radius: 3px;
		height: 50em;
		max-height: 500px;
		padding: 1em;
		
		max-width: 500px;
		margin: 0 auto;
		
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	
	.watson .mensagens{
		box-sizing: border-box;
		overflow: hidden;
		overflow-y: auto;
		height: 100%;
	}
	
	.watson .mensagens .area{
		display: flex;
		justify-content: flex-end;
		flex-direction: column;
		min-height: 100%;
	}
	
	.watson .mensagens .texto{
		border-radius: 2px;
		box-sizing: border-box;
		padding: .65em;
		margin-top: .5em;
		
		animation: popupmensagem linear .2s;
		animation-iteration-count: 1;
		-webkit-animation: popupmensagem linear .2s;
		-webkit-animation-iteration-count: 1;
		-moz-animation: popupmensagem linear .2s;
		-moz-animation-iteration-count: 1;
		-o-animation: popupmensagem linear .2s;
		-o-animation-iteration-count: 1;
		-ms-animation: popupmensagem linear .2s;
		-ms-animation-iteration-count: 1;
	}
	
	.watson .mensagens .texto:first-child{
		margin-top: 0;
	}
	
	.watson .mensagens .texto.usuario{
		background-color: #ECEFF1;
		color: #1A237E;
		margin-right: 30%;
		
		transform-origin: 0% 100%;
		-webkit-transform-origin: 0% 100%;
		-moz-transform-origin: 0% 100%;
		-o-transform-origin: 0% 100%;
		-ms-transform-origin: 0% 100%;
	}
	
	.watson .mensagens .texto.chatbot{
		background-color: #FF5722;
		color: white;
		font-weight: bold;
		margin-left: 30%;
		
		transform-origin: 100% 100%;
		-webkit-transform-origin: 100% 100%;
		-moz-transform-origin: 100% 100%;
		-o-transform-origin: 100% 100%;
		-ms-transform-origin: 100% 100%;
	}
	
	.watson form.mensagem{
		padding: 0;
		margin-top: 1em;
	}
	
	.watson form.mensagem input{
		border: 2px solid #476A7B;
		border-radius: 3px;
		padding: .5em .8em;
		font-size: 16px;
		display: block;
		box-sizing: border-box;
		width: 100%;
	}
	
	.watson form.mensagem input:focus{
		border: 2px solid #1A237E;
		outline: none;
	}
	
	.watson form.mensagem button{
		background-color: #3F51B5;
		border: none;
		border-radius: 3px;
		display: block;
		padding: .5em 1em;
		width: 100%;
		font-size: 16px;
		color: white;
		margin-top: .5em;
	}
	
	
	/**Animação de Mensagem**/
	
	@keyframes popupmensagem{
	  0% {
		transform:  scaleX(0.30) scaleY(0.30) ;
	  }
	  100% {
		transform:  scaleX(1.00) scaleY(1.00) ;
	  }
	}

	@-moz-keyframes popupmensagem{
	  0% {
		-moz-transform:  scaleX(0.30) scaleY(0.30) ;
	  }
	  100% {
		-moz-transform:  scaleX(1.00) scaleY(1.00) ;
	  }
	}

	@-webkit-keyframes popupmensagem {
	  0% {
		-webkit-transform:  scaleX(0.30) scaleY(0.30) ;
	  }
	  100% {
		-webkit-transform:  scaleX(1.00) scaleY(1.00) ;
	  }
	}

	@-o-keyframes popupmensagem {
	  0% {
		-o-transform:  scaleX(0.30) scaleY(0.30) ;
	  }
	  100% {
		-o-transform:  scaleX(1.00) scaleY(1.00) ;
	  }
	}

	@-ms-keyframes popupmensagem {
	  0% {
		-ms-transform:  scaleX(0.30) scaleY(0.30) ;
	  }
	  100% {
		-ms-transform:  scaleX(1.00) scaleY(1.00) ;
	  }
	}
</style>

E agora? Funciona mesmo?

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

Faça o Download do Código no Github, se preferir:

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.

Até o próximo tutorial.

Para prosseguir, é necessário definir o termo artefato digital. Em design, consideramos que artefato é o resultado do projeto. Logo, artefato digital é uma referência ao que é oferecido na contratação e resolução do projeto, como um site, uma revista, um sistema, um aplicativo, etc. O ponto onde mais acontece esse tipo de comportamento é na área de criação de sites, onde muitas pessoas, e até empresas, pegam ou compram templates prontos, e mandam para o cliente como algo original.

Vou listar os argumentos mais comuns daqueles que não veem problemas em revender templates baixados da internet:

1. Ao adquirir algo gratuito, ele é seu, e, por isso, você pode fazer o que quiser com ele;
2. Ao comprar ou adquirir o template pronto em um site, nas suas diretrizes e regras, não está evidenciado a proibição e obrigatoriedade de declarar quem foi o autor da obra;
3. Por modificar cores, logos e inserir conteúdo, eu me torno proprietário e, portanto desenvolvedor daquele site, por isso, posso assinar. O que restringe é você revender aquilo diretamente;
4. O template foi desenvolvido usando a licença GNU ou Creative Commons;
5. A empresa onde eu adquiri o template me deu todos os direitos de uso da obra, do artefato.
6. Simples sacanagem

Muito bem, dados alguns argumentos, os mais comuns que me foram apresentados, vamos respondê-los:

1 – Você não pode fazer o que quiser com algo simplesmente porque foi de graça. Você só recebeu o direito de uso. Isso não significa que você possa vender, alugar, utilizar para outros fins, etc. Por exemplo, digamos que você foi sorteado e ganhou um blu-ray dos Vingadores 3D. Ele foi de graça, mas aquela cópia não pode ser alugada para ninguém. Caso você queira alugar, deve comprar uma cópia autorizada legalmente para este fim e, ainda sim, não te dá o direito copiar para revender;

2 – Direitos intelectuais morais são irrevogáveis. Ou seja, se você desenhou um porco, você nunca vai poder afirmar que não fez o desenho, você não pode vender, repassar, doar nenhum direito intelectual moral sobre a obra. Isso quer dizer que você não pode assinar o trabalho de outra pessoa, de forma alguma, mesmo que permitida pelo autor da obra. Você pode até usar um template como base para seu projeto, mas só para usar seu esqueleto e não para copiar. E, mesmo assim, identificando o original. Se a obra permanecer identificável e for assinada por um terceiro, pode ser declarado plágio ou uso indevido de propriedade intelectual.

3 – Trocar a cor ou adicionar uma logo, imagens ou conteúdo, não transforma o artefato em si. Tampouco faz de você proprietário da obra. Veja o Orkut, o Facebook ou o Google Plus, por exemplo, você adiciona conteúdo, personaliza sua página, adiciona e retira fotos. A ferramenta em si é que permite você utilizar isso, mas ela não é sua porque você a está moldando ou modificando algumas partes.

4 – A licença GNU e a Creative Commons te dá a liberdade de utilizar daquele material comercialmente, ou como melhor lhe convier. Isso não quer dizer, porém, que poderá tomar para si os direitos como criador da obra. Novamente aplica-se aqui o caso de direito de uso. No caso do GNU, para softwares, fica claro que deverá ser repassado a fonte para que possa ser modificado, ainda sim, não abdica os direitos intelectuais morais do artefato em questão.

5 – O que a empresa que vendeu o template, aplicativo ou material digital afirma nunca vai estar acima da legislação do seu país. Assim como dito anteriormente, alguns direitos são irrevogáveis. E mentir para seu cliente, afirmando ter feito algo que você não fez, pode ser enquadrado até (novamente repito, até) como fraude.

6 – Nem preciso argumentar.

Mas e quanto as implicações legais?

Direitos de Propriedade Intelectual

Segundo o Art. 27, Capítulo II, da LEI Nº 9.610, DE 19 DE FEVEREIRO DE 1998, “Os direitos morais do autor são inalienáveis e irrenunciáveis.” O autor fez a obra e ponto final. Não se pode passar, por motivos óbvios, a denominação dessa autoria.

Quanto ao exemplo do bluray dos Avengers 3D, a lei fala, no Capítulo III, “Art. 37. A aquisição do original de uma obra, ou de exemplar, não confere ao adquirente qualquer dos direitos patrimoniais do autor, salvo convenção em contrário entre as partes e os casos previstos nesta Lei.” Ou seja, o fato de ser gratuito não quer dizer que pode usar a obra de qualquer forma.

Ainda no Capítulo III: “Art. 38. O autor tem o direito, irrenunciável e inalienável, de receber, no mínimo, cinco por cento sobre o aumento do preço eventualmente verificável em cada revenda de obra de arte ou manuscrito, sendo originais, que houver alienado.” Este trecho deixa claro que o que você conseguiu de graça não pode simplesmente pegar o original e revender, o autor precisaria receber por isso.

E, o ponto que eu considero mais importante para acabar com a discussão sobre assinar o template feito por outra pessoa, quero deixar esse longo trecho do Capítulo II:
“Art. 108. Quem, na utilização, por qualquer modalidade, de obra intelectual, deixar de indicar ou de anunciar, como tal, o nome, pseudônimo ou sinal convencional do autor e do intérprete, além de responder por danos morais, está obrigado a divulgar-lhes a identidade da seguinte forma:
I – tratando-se de empresa de radiodifusão, no mesmo horário em que tiver ocorrido a infração, por três dias consecutivos;
II – tratando-se de publicação gráfica ou fonográfica, mediante inclusão de errata nos exemplares ainda não distribuídos, sem prejuízo de comunicação, com destaque, por três vezes consecutivas em jornal de grande circulação, dos domicílios do autor, do intérprete e do editor ou produtor;
III – tratando-se de outra forma de utilização, por intermédio da imprensa, na forma a que se refere o inciso anterior.”

Há um consenso geral de que é absurdo você afirmar que compôs uma obra que não compôs, escreveu um livro que nunca escreveu ou  pintou um quadro que nunca pintou. O mesmo deve ser aplicado a qualquer tipo de projeto, incluindo design de interfaces, software, sites, material publicitário, revistas, etc. Por isso, quando o trabalho tem co-autoria, como uma equipe, os nomes de todos devem estar evidenciado, como em editorial ou em um casting de filme.  Mas está claro, por tanto, que, independente do que você considere certo ou errado, de padrões éticos ou não, é COMPLETAMENTE ILEGAL deixar de indicar o autor VERDADEIRO da obra.

Terceirização de Atividade-Fim ou Quarteirização

A atividade-fim, como o próprio nome diz, é o objetivo social da empresa, trata-se do que ela faz, o que ela se dispõe a fazer, qual a sua principal função ou funções. Por exemplo, um estúdio de design digital, tem, como sua atividade-fim (dependendo do que está declarado em sua razão social) desenvolver websites, interfaces e soluções para diversas áreas de comunicação. Já uma fábrica de softwares tem como atividade-fim desenvolver soluções para a área da qual ela se propõe.

Segundo o advogado Paulo Henrique Teixeira, em seu livro Terceirização com Segurança, afirma “A terceirização pode ser aplicada em todas as áreas da empresa definida como atividade-meio. (…) É ilegal a terceirização ligada diretamente ao produto final, ou seja, a atividade-fim. Isolando a atividade-fim, todas as demais podem ser legalmente terceirizadas.” Ou seja, você não pode, em hipótese alguma, terceirizar aquilo que você se propõe a fazer.

Isso, para alguns, não parece óbvio. Mas a verdade é como se você contratasse uma faxineira para limpar sua casa, só que, em segredo, ela contrata uma outra pessoa por um preço menor, para fazer todo o trabalho. Ou seja, oferece um serviço, não faz, contrata outra pessoa para fazer e ainda sai lucrando com isso. Realmente parece certo para você? Parece certo que uma pessoa ofereça um site para alguém e, em segredo, compra um site de terceiros, mude uma cor e depois entrega? Não me parece algo de boa fé.

Esse problema não atinge somente pequenas empresas ou a área de TI, em Fevereiro de 2012 a Volkswagen foi condenada por terceirizar atividade-fim. Em muitos casos, esse tipo de comportamento pode ser considerado fraude e causar punições realmente sérias para quem a fizer.

Uma prática muito comum que vem acontecendo, dentro do mercado de TI, é o pedido de que a pessoa a ser contratada abra um CNPJ e forneça o serviço, como Empreendedor Individual, ao contratante. Apesar de parecer muito interessante por reduzir encargos, as contratantes não repassam esses valores economizados. Por exemplo, digamos que um programador PHP receba um salário de R$3.500,00. Isso quer dizer um custo de aproximadamente R$6.000,00, fora o investimento em equipamento, energia, água, enfim, manutenção do ambiente de trabalho. Agora, o contratado, como CNPJ, irá receber os mesmos R$3.500,00, talvez R$4.000,00, mas sem direito a férias, décimo terceiro, INSS (que não é só aposentadoria, mas também doenças), Seguro Desemprego, FGTS, etc. Além, claro, dos custos com equipamentos próprios e administrativos. Não parece um negócio tão bom assim se parar para pensar não é? Além disso, se o profissional passar mais de 3 dias ou houver comportamento hierárquico, ou seja, sendo subordinado a alguém, o TRT (Tribunal Regional do Trabalho) considera como empregado e a empresa deverá responder por sua ilegalidade.

Vale salientar, entretanto, que empresas que fazem esse comportamento supracitado estão agindo ilegalmente e podem responder ao TRT e serem obrigados a pagar tudo retroativamente. Mas também não quer dizer que você não deva ter um CNPJ e trabalhar oferecendo serviços, apenas precisa aprender a pesar bem e verificar como está sendo feito, para manter tudo dentro do mercado ético e sadio.

Mas eu insiro conteúdo, faço modificações, eu devo parar com isso ou fazer de graça?

Ninguém está afirmando que deve fazer o trabalho de graça. Mas aí é que está a afirmação do tipo de serviço que você oferece. Se você, ou seu cliente, quiserem modificar um template já pronto, você deve prestar-lhe um serviço de consultoria, fazendo parte de sua atividade-fim. Não importa se você é designer, programador ou analista de conteúdo, você pode ser um consultor.

Como consultor, você vai recomendar a seu cliente qual e onde ele deve comprar o template. Isso é completamente diferente de você afirmar que fez. Você está sendo honesto e mostrando para ele opções. Além disso, você não vai assinar algo que você não fez. A assinatura deve permanecer com a original. E, se você fizer modificações suficientes para julgar que vale a pena a menção de seu nome, divida a autoria. Por exemplo: “Desenvolvido por CoolThemes, adaptado por RodrigoPortillo”. Simples, não é? Assim você afirma que você não desenvolveu, só o adaptou e, ainda, ajudou seu cliente.

Exemplificando melhor:

Digamos que você foi contratado para fazer um sistema X. Digamos que você, por desconhecimento em design, optou por usar o Bootstrap. Neste caso, você foi contratado para fazer o sistema e terceirizou parte dele (no caso o Bootstrap), então não há problemas.

Agora, digamos que você foi contratado para fazer uma interface para um sistema X. Você não pode optar por usar o Bootstrap para ele. Pode até usar a sua base esquelética, mas sua obrigação, como designer de interação, é desenvolver e implementar toda a interface específica e pensada para aquele sistema. Neste caso, há problemas.

A Polêmica Política

Desde o final do ano de 2016, um Projeto de Lei que garante terceirização irrestrita está tentando ser aprovado. Do ponto de vista jurídico, isso significa que qualquer empresa poderá contratar qualquer outra empresa para fazer qualquer coisa, mesmo que seja o que ela foi contratada para fazer. Para as empresas, financeiramente, isso é um bom negócio, pois afirma que pode ter todos os seus colaboradores contratados sob o regime de Empreendedor Individual e não precisar pagar nenhum encargo. Da mesma forma, eles podem rescindir desse contrato quando bem entender.  Entretanto, esse projeto teve alguns trechos podados e foi sancionado, no começo de 2017, com ressalvas, pelo então Presidente da República.

As leis trabalhistas, realmente, em alguns pontos, precisam ser afrouxadas para poder fomentar a contratação por pequenas empresas e trabalhos temporários. Os sindicatos, em sua maioria, estão abusando tanto do contribuinte quanto das questões legais e esquecendo suas funções sociais. Todavia, a terceirização irrestrita pode causar um colapso no número de empregos e até mesmo causar demissões em massa para contratação por CNPJ, além de acordos unilaterais que podem explorar quem não possui conhecimento sobre seus direitos.

De fato, a terceirização irrestrita traria também um problema filosófico quanto a ética sobre produção e a propriedade intelectual e moral sobre o que está sendo produzido. Afinal, se eu contratar uma empresa para fazer um software, e ela contrata outra mais barata, que, por sua vez, contrata outros três Empreendedores Individuais, de quem é a propriedade moral do projeto? Quais garantias de entrega de qualidade à medida que se diminui o laço de contato e se torna uma rede de “telefone sem fio”?

ATENÇÃO:

Para a procuradora do trabalho do MPT/PRT-11, Cirlene Luiza Zimmermann, a Lei 13.429, de 31 de março de 2017, não autorizou expressamente a terceirização na atividade fim das empresas: “A terceirização foi aprovada para a contratação da prestação de serviços determinados e específicos, ou seja, serviços especializados, como era até então, com base no entendimento consolidado pelo Tribunal Superior do Trabalho”

Vale lembrar que o texto do referido projeto de lei foi sancionado com mudanças consideráveis, que seriam revistas com as novas diretrizes da Lei do Trabalho, que foi adiada por conta de todo o processo que atingiu o então presidente da República Michel Temer. Isso quer dizer que a terceirização NÃO é irrestrita ainda, a lei apenas permite a terceirização da atividade fim sob determinadas condições e processos administrativos, como deixa claro a Dra Gisele Leite (http://www.jornaljurid.com.br/colunas/gisele-leite/terceirizacao-e-a-lei-134292017). Ainda, essa nova lei não deixa mais claro a diferença entre atividade-fim e atividade-meio. Porém mesmo com essa nova lei, devido a determinados vetos em seu projeto e o não avanço das novas diretrizes da Lei do Trabalho, dentro dos exemplos supracitados, a quarteirização, no que condiz ao segmento de tecnologia em como é levado, continua ilícita.

Ah! Portillo! Faça o seu! Vai fazer algo de útil ao invés de ficar fiscalizando os outros

Primeiro quero deixar claro que eu não saio por aí fiscalizando, mas, como sou do meio, vez ou outra alguém que trabalha em uma empresa dessas me aparece e vou conferir. Eu reconheço quase que na hora um site de feito em template genérico, uma identidade visual que usa logos stock ou um sistema cheio de códigos genéricos.

O fato é que eu acho muito útil discutir sobre o assunto e denunciar as empresas que agem de forma errada. Como eu denuncio? Geralmente mando uma mensagem pública e, se me xingam, me bloqueiam ou algo assim, eu entro em contato com pelo menos um dos clientes. Por que isso é importante? Porque são essas empresas que destroem o mercado honesto. Um mercado sadio é fundamental para que todos cresçam e se fortaleçam.

Não só são empresas pequenas que fazem esse tipo de coisa, algumas tem clientes grandes, escritórios grandes. Afinal, é uma forma muito fácil de ganhar dinheiro. Você realmente acha que eu devo ficar calado em quando uma pessoa está sendo tripudiada? E que tal o fato de que enquanto nós, designers e desenvolvedores de verdade, estudamos, pensamos, planejamos,etc., tem um cara cobrando o mesmo, e até mais que a gente, sem fazer trabalho nenhum, só mudando a cor de um objeto. Só esta semana eu vi 3 “estúdios” que tem esse comportamento. O resultado, se deixarmos isso continuar, é a desvalorização da profissão. Desenvolvedores, no geral, já são vistos como preguiçosos e profissão fácil, imagina se esses caras continuarem a agir de má fé desse jeito! Como nós, honestos, seremos vistos?

Anos atrás eu trabalhava em uma empresa boa, desenvolvendo um sistema em Adobe Flex para controle de estoque. Porém não ganhava o que considero justo. Recebi, então, uma proposta para ser diretor de arte de uma agência web que estava se desenvolvendo. Foi uma proposta razoável e valia a pena arriscar. O problema é que eles estavam se mudando para uma casa e gastaram 10 mil na reforma. Só que nada desse dinheiro foi usado na compra de novos computadores e as máquinas eram realmente ruins (tinha máquina com 512MB de RAM, em 2010). Vendo o problema para desenvolver, cheguei ao dono da empresa e disse: “Olha. Você investiu 10 mil na casa, mas não deu um centavo para compra de computadores, que são as ferramentas de trabalho da empresa. Eles deveriam vir primeiro.” Passou mais duas semanas e nada de computador, resolvi me demitir, disse a ele que não dava e que era impossível trabalhar daquele jeito, então ele pediu uma semana para que o contador ajustasse as coisas.

Uma semana depois, eu volto e nada. Ele (o dono) só queria me pagar cerca de 25% do combinado do salário e ainda queria que eu passasse uma nota fiscal para ele. Claro, fiquei irritado e disse que era absurdo, afinal, eu fui contratado para trabalhar lá e ele já estava com minha carteira há um mês. Então, não tive outra opção. Acionei a justiça.

O dono da empresa estava confiante que juiz não ia nem se importar por um mês de trabalho. Mas, era um valor justificável para uma ação. Sumaríssima.

A advogada dele veio com a defesa de que teriam me achado na internet e contratado para fazer 3 sites que eu nem cheguei a terminar. Como “prova” levaram um print screen do meu site, uma testemunha que nunca me viu e ainda queriam exigir os custos do processo. O juiz, que obviamente era um cara inteligente, olhou tudo e perguntou para a testemunha qual o custo médio de um site. A testemunha responde: “entre dois mil e dois mil e quinhentos reais”. O juiz então viu que o valor que eu estava pedindo correspondia com o salário de um diretor de arte e disse ao dono da empresa: “Terceirização de Serviços Oferecidos é ilegal, por isso, você admite todos os vínculos trabalhistas com o queixante” (não foram bem essas palavras, mas é o que me lembro). E ainda mandou o cara pagar os custos do meu advogado. Quando uma empresa contrata alguém terceirizado para fazer um serviço de sua atividade-fim, ela é obrigada a fazer dele um empregado, ou seja, não pode terceirizar.

No dia seguinte, o dono da empresa, de pirraça, tirou tudo do nome dele e logo fechou a empresa, o juiz mandou penhorar alguns bens. O cara botou tudo no nome da mulher e até hoje não me pagou tudo. Mas eu fiquei feliz porque ele agora não pode fazer nada até me pagar e nem é tanto assim. Ele criou uma empresa, com o mesmo nome, através de um laranja, só que ele agora usa o nome consultoria, acho que para não passar por isso de novo. Só para constar, ele pula de tipo de serviço a tipo de serviço o tempo todo. Nada do que ele faz dá certo, mas ele sempre usa o mesmo nome na empresa.

A forma correta de agir

Para agir corretamente não tem segredo. Basta ser honesto com seu cliente. Se você estudou muito e desenvolveu um site, ótimo, se você acha que o cliente deve usar um template pago, recomende para ele e cobre somente a consultoria. Não fira o direito de propriedade intelectual, cada um merece ser reconhecido por seu trabalho e, além de obrigatório, é a coisa correta a se fazer. Denuncie, relate, use do seu sarcasmo, só não deixe isso passar pela sua frente sem fazer nada.

Agora, se você ou sua empresa faz isso, pense, repense e lembre-se: Dentro do que foi exemplificado acima, ainda é ilegal, não importa o que você acha. Ajuste-se à ética, ao mercado sadio e ao comportamento de mercado justo e transparente.

Como tudo começou

No início, na época dos grandes mainframes, você precisava carregar o computador com toda a programação que iria utilizar. O primeiro sistema operacional realmente funcional foi o GM-NAA I/O, da General Motors, criado para funcionar no IBM 704. A ideia era automatizar diversas atividades sem ter que reenviar constantemente códigos bases para fazer uma determinada função, além de gerenciar melhor os recursos do equipamento. Com o tempo, diversas empresas desenvolveram sistemas operacionais para seus mainframes, algumas se especializaram na criação de sistemas para terceiros. O problema é que cada um apresentava características próprias e não possuíam nenhum tipo de comunicação entre si, criando a necessidade, aos poucos, de um padronização.

Em 1960, a IBM criou um sistema operacional chamado OS/360, para uma máquina chamada System/360. Várias versões do OS/360 foram desenvolvidos, conforme versões de sua máquina, algumas mais avançadas e outras menos eram lançadas. Algumas versões posteriores desse Sistema Operacional até receberam outros nomes e arquiteturas de terceiros. O fato é que a IBM não foi a única a lançar Sistemas Operacionais, outras instituições, principalmente universidades (ou em acordos com essas), começaram a fazer novos sistemas, como o SCOPE, MACE, NOS, dentre outros.

Sem dúvida, o mais famoso dos Sistemas Operacionais para mainframes, na época, foi EXEC, para o UNIVAC (UNIVersal Automatic Computer). Um computador que fez muito sucesso entre os anos 50 e 60, principalmente por serem considerados pequenos e mais baratos (chegando até a versões que tinham o tamanho de apenas algumas geladeiras). Dessa forma, esses computadores acabaram por ser mais acessíveis a universidades e pequenas empresas.

Todavia, a história do Sistema Operacional que utilizamos hoje, em microcomputadores, está ligada totalmente a história da computação pessoal, em especial, ao que foi considerado o primeiro PC: o Altair 8800.

Criado com uma das primeiras linhas de microprocessadores da Intel, o Altair 8800, era um microcomputador onde você precisava programar subindo e descendo chaves. Na prática, ele era um kit, e não realmente um computador, destinado a hobbystas. Porém, essa máquina era praticamente inútil, até que Bill Gates e Paul Allen resolveram pegar uma dessas máquinas e portar o BASIC (linguagem de programação) para essa máquina, criando o que seria conhecido como Microsoft-BASIC.

Os primeiros microcomputadores não rodavam realmente sistemas operacionais, mas algo bem próximo a esses, chamados de Interpretador. Eles rodavam comandos de programação, compilava e executava. Não demorou muito até que a ideia de Sistemas Operacionais, já usada em mainframes, chegassem aos microcomputadores. Afinal, carregar sempre um programa, sem sistema de arquivos, não era algo fácil, e os disquetes estavam começando a se tornar uma realidade.

Voltando um pouco no tempo, de volta a metade dos anos 60, houve um grande esforço de uma parceria entre o MIT, General Eletronics e da AT&T para a criação de um sistema operacional: o Multics. O problema é que até o final da década, o sistema não ficou pronto. Por conta de incertezas na busca pelo resultado e nos diferentes desejos de implementação de seus criadores, o Multics acabou sendo descontinuado. Porém, em 1969, Ken Thompson, um dos responsáveis pelo projeto, utilizou o seu conhecimento para uma versão menos ambiciosa, denominada então de Unics e, posteriormente, rebatizado como Unix.

Em 1973, o Unix foi reescrito em C (antes fora escrito em Assembly), pelo próprio Ken Thompson e por Dennis Ritchie (criador da linguagem C). Mais tarde, o Unix começou a ser usado como base para outros sistemas operacionais, principalmente seu o núcleo (kernel), criando assim uma série de derivados. Em especial, podemos destacar o Berkeley Software Distribution, ou BSD. Dessa série de derivados começou-se a criar a família de Sitemas Operacionais Unix ou ix, dos quais veio o POSIX, MINIX, FreeBSD, Solaris, dentre outros, mas ainda não foi agora que o Linux apareceu.

Os Sistemas Operacionais para PC

Voltando aos microcomputadores, logo após o Altair, diversos equipamentos começaram a surgir, com destaque ao Apple II. O Apple II possuía um interpretador BASIC, mas não apenas isso, foi criada, pela Apple o Apple DOS. O nome DOS veio do termo Disk Operating System (guardem bem esse nome), que teve outros derivados, da própria Apple, com o tempo. O fato é que o mercado da Maçã crescia mais e mais na área de computadores pessoais, e a IBM, grande detentora da venda de mainframes, resolveu criar um novo computador. Com uma oferta até então inédita para a companhia, eles criaram o PC-IBM, usando peças de terceiros para compor o computador. Porém, eles precisavam de um Sistema Operacional, e é aí que a história muda.

A IBM precisava de um sistema operacional para poder vender seu novo computador, porém não tinha tempo para fazer. Afinal, a Apple já estava em alta, e o mercado estava complicado. Dessa forma, a IBM precisava comprar um sistema operacional pronto, foi quando William Gates II fez uma recomendação para os advogados, e outros responsáveis pela IBM, sobre a empresa de seu filho, a Microsoft, já conhecida por portar o BASIC para o Altair e desenvolver alguns programas para Apple II.

Porém, a Microsoft não possuía sistema operacional, então Bill Gates (William Gates III), sócio fundador da Microsoft, ligou para a maior empresa de Sistemas Operacionais da época, a Digital Researchs, de Gary Kildall, desenvolvedora do CP/M. Infelizmente, a companhia não deu a atenção devida aos representantes da IBM, não finalizando nenhum acordo com a Big Blue (apelido da IBM). Então, a IBM voltou à Microsoft. Desta vez, Bill Gates não perdeu a oportunidade. Steve Ballmer, um dos três fundadores da Microsoft, soube de uma empresa que criou um sistema operacional simples, mas muito funcional. A Seattle Computers havia criado um sistema chamado QDOS, ou Quick and Dirty Operating System (Rápido e Sujo Sistema Operacional), baseado na tecnologia x86, dos processadores da Intel. Estima-se que esse sistema operacional tenha sido comprado por 40 mil dólares, porém isso é incerto, esse sistema foi adaptado e apresentado a IBM pela alcunha de MS-DOS (Microsoft Disk Operating System).

Fechando o acordo com a IBM, a única exigência da Microsoft era que os direitos de revenda do DOS pudesse ser dela. A IBM não se preocupou com isso, afinal, na época, cada Sistema Operacional era único para um computador, por questão de arquitetura. Algo que fez a IBM se arrepender, em 1982, por causa de uma empresa chamada Compaq e de uma coisa chamada engenharia reversa.

A Compaq contratou vários engenheiros (que afirmaram nunca ter trabalhado na IBM) que pegaram o computador da Big Blue e, ao ver como ele funcionava, perceberam que era uma amálgama de peças de outros fabricantes. Dessa forma, eles desenvolveram um computador Compaq PC, conhecido como IBM-PC Compatível. Dessa forma, todos os programas que pegavam no IBM-PC já funcionariam no novo computador da Compaq, incluindo o MS-DOS. Essa ideia fez surgir uma série de computadores compatíveis com IBM-PC, e muito mais baratos, criando um mercado forte e altamente competitivo, o que resultou na queda das vendas do Apple II.

O início da Interface Gráfica

Em 1979, todo mundo esperava alguma novidade da Apple. A IBM estava ainda longe de lançar o PC-IBM, e Apple praticamente tinha um monopólio no mercado de computadores pessoais com seu Apple II. Na época, a Xerox possuía um ambiente focado em pesquisas chamado de PARC (Palo Alto Research Center). Em troca de poder comprar ações, a Xerox abriu suas instalações de pesquisas para a Apple. Steve Jobs, CEO da Apple na época, e outros executivos e engenheiros, foram até o PARC e lhes foram apresentados algumas tecnologias interessantes, como a Ethernet e a Linguagem Orientada a Objetos. Porém, o que realmente impressionou os visitantes foi uma versão bem arcaica de uma interface gráfica, com um dispositivo chamado Mouse, que estava ligado a um computador. Isso foi importante para poder criar o primeiro sistema operacional funcional com interface gráfica, o Lisa OS, para o Apple Lisa.

Com o avanço da IBM no mercado de computadores pessoais e, posteriormente de clones, a Apple precisava lançar algo novo no mercado. O IBM era mais barato e completo do que o Apple II. O Lisa estava ficando muito caro e a diretoria da Apple resolveu que estava na hora de Jobs procurar outro projeto. Passeando pelas instalações da Apple, ele encontrou um projeto destinado a computadores de baixo custo, o Macintosh. Rapidamente, Jobs afastou Jef Raskin (então criador da ideia) e assumiu o projeto Macintosh, mudando rapidamente seu conceito, porém querendo manter a parte de interação humano-máquina.

O Macintosh foi criado para ter um sistema operacional revolucionário, com interface gráfica, chamado de MacOS (hoje conhecido como MacOS Classic). Durante a produção do MacOS, diversos desenvolvedores foram chamados para criar programas para ele. Uma das empresas chamadas foi a Microsoft, que uso o acesso antecipado ao MacOS para criar não um sistema operacional ainda, mas uma GUI, Interface Gráfica do Utilizador.

Quando foi criado, o Windows ainda não era um Sistema Operacional, mas sim uma interface gráfica para o MS-DOS. O Windows só veio se tornar realmente um sistema operacional, com núcleo próprio, com a vinda do Windows NT. Quem tem mais idade vai lembrar que quando você ligava o computador ele iniciava no MS-DOS, sendo necessário digitar win, para usar o Windows.

No começo, o Macintosh foi um fracasso, que só veio se recuperar anos mais tarde com o advento do PostScript pela Adobe, mas essa já é uma outra história.

O fato é que pelo Macintosh ser muito caro, os PC-IBM e compatíveis começaram a ganhar mais e mais mercado, e, com isso, a Microsoft começou a ter uma liderança absoluta de mercado.

Surge o Linux

Em 1991, Linus Torvalds lançou a primeira versão de um núcleo de sistema operacional chamado de Linux. Diferente do que é divulgado por muitas pessoas, o Linux não é feito em cima do Unix. O Linux foi escrito do zero, inspirado pelo Minix (esse sim um sistema Unix). Torvalds dizia querer criar “um Minix melhor que o Minix”. Porém, este tinha o objetivo de ser simples, mas ainda sim, ser compatível com a grande maioria dos aplicativos para Unix.

Porém, a ideia de Linus Torvalds era divulgar e abrir o código para que diversas pessoas pudessem colaborar. Com ajuda de diversos outros programadores, a versão 0.02 do núcleo finalmente ficou pronta. Pouco depois, Linux Torvald colocou seu núcleo sobre a licença GNU (GNU Is Not Unix – é o que realmente quer dizer), que foi um sistema operacional, desenvolvido para ser compatível com o Unix, porém sem ter o código fonte do Unix.

O GNU era um projeto de sistema operacional sem núcleo e o Linux era um núcleo de sistema operacional sem bibliotecas e funções atreladas. Ao atribuir a licença GNU ao Linux, foi criado o GNU/Linux, sistema operacional base para diversas distribuições que surgiriam em seguida.

Em resumo, o Linux não é Unix, é um núcleo de sistema operacional, que, unido ao GNU, criou o GNU/Linux. Tanto o GNU quanto o Linux foi criado com o objetivo de ser mais simples que o Unix, porém com a compatibilidade para a maioria dos aplicativos Unix.

Segundo a licença GNU, qualquer software que a utilize não pode ser fechado. Isto é, tudo deve ter o seu código aberto, disponível para editar o código e fazer o que quiser com ele. Porém Software livre não quer dizer software gratuito. É possível até vender o software, todavia o vendedor deve enviar o código fonte junto e não apenas o executável compilado.

Com o tempo e divulgação do GNU/Linux, diversas distribuições, baseados neste, foram sendo lançadas. Essas novas versões adicionavam sistemas de janelas, compatibilidade com outros sistemas de arquivos, bibliotecas para determinadas funções, pacotes exclusivos, etc. Essas distribuições eram criadas por terceiros, algumas por governos, outras por empresas que queriam algo mais personalizado para dar foco em uma determinada tarefa. Muitas dessas distribuições também foram criadas por grupos que tinham o interesse de criar sistemas cada vez melhores e mais completos.

As distribuições linux mais conhecidas hoje são:

• Mandriva
• Ubuntu
• CentOS
• Solus
• Arch Linux
• Fedora
• SUSE

Cada uma com um objetivo e conceito diferente. É muito comum, também, uma distribuição Linux se basear em outra. Por exemplo, o Ubuntu é baseado no Debian e o CentOS no Redhat. É importante que o usuário saiba em qual a distribuição que ele usa se baseou, pois alguns comandos podem mudar de uma distribuição para outra.

Sistemas Operacionais Desktop Contemporâneos

Hoje, os principais sistemas operacionais que usamos em desktops, servidores e laptops são o Windows, o MacOSX e as distribuições GNU/Linux (como o Ubuntu, Solus, Debian, etc.). Todos esses sistemas possuem versões específicas para usuário comum e para servidores.

Hoje em dia, todos os sistemas operacionais seguem uma mesma lógica de funcionalidades. Quanto a sua camada direta ao usuário, são formados por um sistema de janelas e um terminal para poder ter um acesso direto as funcionalidades técnicas.

As particularidades de cada um desses três sistemas, assim como seus sistemas de arquivos e versões, falaremos na parte 2 deste conteúdo.

Sistemas Operacionais para dispositivos móveis

Na segunda metade dos anos 2000, com o avanço das plataformas móveis, diversos sistemas operacionais com particularidades diferentes, específicos para esses equipamentos, foram criados. Eles precisavam ser mais leves e continham uma lógica de interação completamente diferente.

Nessa época foi quando surgiu o Symbian e o BB, da Nokia e Blackberry, respectivamente. Esses sistemas foram responsáveis pela popularização dos smartphones, trazendo acesso a aplicativos de produtividade e segurança, modernos, a usuários mais leigos. Claro, desde os anos 90 haviam sistemas operacionais para computadores de mão (PDA), como o palmOS e o NewtonOS, mas nem de longe conseguiram a popularização dos smartphones.

Hoje, o Symbian se tornou um sistema utilizado em alguns televisores, principalmente, e a BlackBerry não produz mais aparelhos com o BB10 (sua última versão). Porém a Google está em alta com o Android e a Apple com seu iOS. A Microsoft, que outrora sempre foi presente no mercado de palmtops (os computadores de mão), com seu Windows CE, está em último lugar nos sistemas operacionais para smartphones.

Falaremos das particularidades dos principais sistemas operacionais para smartphones (Android, iOS e Windows), na parte 2 deste conteúdo.

Outros Sistemas Operacionais

Praticamente tudo que tem um microchip, e rode aplicativos, hoje opera através de um sistema operacional. Existem sistemas operacionais em automóveis, em televisores, videogames, em relógios e outros vestíveis, etc. Temos sistemas operacionais dedicados até mesmo em comandar uma casa.

Porém, em nosso estudo, vamos nos dedicar aos principais sistemas operacionais para microcomputadores e dispositivos móveis, pois a maioria dos sistemas para outros gadgets são criados a partir desses. Além disso, todo o sistema operacional moderno utiliza alguns elementos que são padrões, o que facilitará a compreensão.

Concluindo

Nesta primeira parte vimos um pouco da história dos sistemas operacionais e algumas de suas definições. Essa história é importante para que conheçamos posteriormente os componentes dos sistemas operacionais e as peculiaridades disponíveis no mercado.

Este texto foi criado a partir das seguintes fontes:

Documentário The Code – A história do Linux
Documentários O Triufo dos Nerds, da ABC
Livro O Fascinante Império de Steve Jobs
Livro Computação Gráfica Teoria e Prática
Site oficial do Projeto GNU
Site oficial do Debian

Pensando nisso, a Microsoft implementou uma forma de trazer o bash de algumas distribuições como subsistemas para o Windows. Basicamente isso significa que você pode ter uma distribuição GNU/Linux instalada em seu sistema operacional de forma integrada. Ou seja, funcionando como um sistema nativo e não em uma máquina virtual, economizando assim recursos da máquina e mantendo um acesso mais rápido.

ATUALIZADO

Nas versões atuais do Windows 10, a instalação do bash GNU/Linux é muito mais simplificada.

Basta primeiro você ir em iniciar e buscar por Ativar ou Desativar Recursos do Windows.

Ao abrir, procure e marque a opção Subsistema do Windows para Linux. Você vai precisar reiniciar o computador logo em seguida.

Após reiniciado, abra a Windows Store e na busca digite Linux. Você encontrará várias opções de subsistemas que você pode instalar em seu computador. Selecione o que você quiser e instale.

Dica: Caso você procure por uma versão específica, na busca da Windows Store digite o nome da distribuição de seu interesse.

Após instalar da loja, você vai notar que há um novo aplicativo no seu menu iniciar, referente a distribuição que você instalou. Ou você pode iniciar seu prompt de comando e digitar bash.

Assim que você abrir o aplicativo, ele irá avisar que vai baixar o sistema operacional escolhido. Em seguida, você deve definir o login e senha de administrador.

E, pronto! Você já pode usar o susbsistema GNU/Linux em seu Windows.

Dica: caso você entre pelo BASH e queira entrar dentro do drive C:/ do Windows, digite “cd /mnt/c” (sem aspas) e você será encaminhado para o drive C:/.

Você sabe quanto custa ser um designer? E quanto custa ser um programador? E pior! Sabe quantas pessoas fizeram faculdade (ou até autodidatas), estudaram muito, fizeram bons cursos e/ou leram bons livros? Pois é… mas para alguns, isso não tem valor.

Porém, esse rapaz não foi o primeiro a fazer esse tipo de trambicagem. Empresas estão se fortalecendo baseado nessa ideia absurda. Isso está acontecendo muito com gráficas rápidas, que resolvem vender sites para aumentar sua renda. O problema é que elas geralmente não fazem os sites, mas pegam templates grátis e trocam o “desenvolvido por”. E nem tomam o cuidado de disfarçar e no código, podemos até ver o nome dos templates.

Na imagem abaixo, vocês podem ver um detalhe de uma das conversas que eu tive com uma ex-aluna de mídias sociais que trabalhava em uma empresa que fazia esse tipo de “trabalho” (ocultei o nome e a foto porque ela não necessariamente é a responsável, mas uma funcionária).

Depois dessa conversa ela me bloqueou. Ela e seus colegas de trabalho. Porém, eu fui na página do Facebook deles e deixei uma mensagem “bonita”. Claro, que eles apagaram, aí eu deixava de novo. Mas na terceira vez fiz melhor. Resolvi colocar no Twitter dos clientes deles um link para o site original de onde eles pegavam os templates. Infelizmente, é comum que essas mesmas empresas que prestam esse serviço são quem tomam conta das mídias.

O Site de um rapaz, chamado Nilton Câmara (que foi a vítima), foi um dos maiores exemplos de cara de pau de uma prestadora de serviço da área de tecnologia. Realmente não mudaram nada, nem uma cor ou um símbolo, e ainda colocaram no canto: Website Design by Conhecimento Digital. Copyright 2012.

Afinal, qual o problema disso?

Primeiro lugar, vamos a questão ética. Você gostaria de comprar um iPhone 6 da Samsung? Eu sei que a pergunta parece absurda, mas é isso o que acontece. Simplesmente, ao invés de fazer um produto novo, está sendo terceirizado um serviço oferecido. Se você soubesse que poderia ter algo totalmente genérico a um preço muito mais baixo, ou até de graça, você pagaria por essa mão de obra inútil?

Ainda na questão ética, assinar um projeto de outra pessoa é certo? Imagina se eu assinasse um site feito por outra pessoa, um quadro feito por outro artista. Isso não seria correto e traria grandes problemas para o comprador, que acha que está adquirindo um produto original, quando na verdade, é genérico.

Segundo, os problemas legais. Terceirizar serviço (quarteirizar) oferecido é ilegal! Eu mesmo já processei uma empresa por isso, e ganhei, sem discussão. Não se pode oferecer um serviço e pagar outra empresa para fazer. Tanto que, no meu caso, resolveram mudar o nome e o tipo de serviço para consultoria. Além disso, isso fere os direitos de propriedade intelectual, que é irrevogável! Isso mesmo, não pode ser repassado para ninguém. A propriedade intelectual garante a autoria de projeto, o que é diferente dos direitos comerciais. O autor pode abrir mãos de seus direitos comerciais, mas não pode se abdicar do intelectual. Roubar a autoria do projeto de outro também é ilegal.

O que isso traz de ruim para o cliente e para a prestadora de serviços?

A contratante pode se sentir lesada, pois comprou, muitas vezes, um projeto original. Além disso, o leiaute de uma empresa, instituição ou órgão, deve seguir uma identidade corporativa que é definida em todos os projetos gráficos. O SEO desses templates geralmente não são dos melhores e a semelhança desse site com outros templates genéricos também não são bem trabalhados e podem dificultar o encontro do site pelo Google.

A prestadora de serviço, além do fato da ilegalidade, também está perdendo experiência e estabilidade no mercado. Tornar-se-á pouco confiável.

Mas como deve ser feito então?

Existem 3 formas corretas de trabalhar corretamente com isso:

1. Criar um Layout e Template Original;
2. Modificar um Template Free existente, dando devida referência ao template original e deixando claro ao cliente que é uma alteração;
3. Usar um template free ou pago, mas dar a devida referência ao autor e não ter nenhum lucro direto com isso.

O site da PortilloDesign usa um CMS próprio, criado por nós, que prentendemos abrir o código futuramente. Porém, também trabalhamos com outros CMSs em alguns clientes, onde todos os sites são montados primeiro no Photoshop e depois implementado no código referente ao CMS escolhido. Cada template é único e pensado para a necessidade e estética de cada cliente. Os layouts não aprovados são jogados na lixeira para que não sejam reaproveitados.

O blog The Pink Geeks usou um template modificado e as garotas colocaram no rodapé a assinatura junto com os criadores do template original, por exemplo. O Mesmo acontece com o site do E-Farsas, onde ele coloca: “Tema modificado do FabThemes.com”

Não tem problema nenhum em usar um template free, só deixe no rodapé o autor original e não cobre por algo autêntico, somente pela modificação que fizer. Não mude a autoria do trabalho, isso não vai desmerecer de forma algum o seu conteúdo. Todas as pessoas confiáveis precisam ser transparentes.

Concluindo

Não existe um real monitoramento, registro, fiscalização ou cadastro de empresas e profissionais de TI. Da mesma forma, não existe uma fiscalização sobre o que eles fazem. Existem muitas leis sendo criadas para defender pessoas que aparecem peladas na internet, ou um ou outro xingamento preconceituoso. Mas a parte de negócios continua sendo terra de ninguém. Pessoas disfarçadas de profissionais continuam tripudiando empresários e blogueiros que querem melhorar o seu trabalho.

Vale lembrar de que de forma alguma você pode pegar um template pronto e simplesmente revender, ou modificar e revender, se você foi contratado para fazer o site. Se a ideia é modificar algo pronto, então deixe isso claro e revelado como o serviço. Lembre-se que terceirização de serviço oferecido é ilegal e anti-ético.

Existe até uma ferramenta especializada em verificar se o site usa um template comum ou não, para WordPress:
http://www.wpthemedetector.com

Mas o que vocês acham disso? Tem uma opinião diferente sobre a ética nesse caso? Deixe sua opinião.

Como Funciona um Site de Design Contest?

O Cliente faz um cadastro, lança um “briefing”. Diz que quer pagar, digamos, 200 reais. Então a empresa lança o concurso e manda por e-mail para algumas centenas de designers cadastrados. Esses designers lerão o que o cliente pediu e fará uma “logomarca”. O cliente então escolhe a que ele preferir e paga direitinho o designer vencedor… lindo, né? O Designer ganhou, a empresa ganha. Todos ficam com dinheiro garantido.

Como funciona DE VERDADE um Site de Design Contest?

Um empresário desinformado (ou se achando o espertão), que não compreende o valor do trabalho de um design procura uma empresa qualquer para fazer o trabalho quase de graça. Então ele encontra um site como o We do Logos ou Click to Layout. Daí ele vê que tem a oportunidade incrível de ter centenas de designers à disposição por qualquer mixaria que ele oferecer. Então ele pensa: “Para quê eu irei gastar 8 mil com um designer? Se com 200 reais eu terei vários?”. Então o empresário, contrata a empresa de Concorrência.

O dono do site de Concorrência, como é muito esperto, cobra, digamos, mais 50 ou 100 reais. E daí, quase sem custos (somente hospedagem e o desenvolvimento inicial do site e alguma coisa para manter as linhas de comunicação) ele manda o e-mail para micreiros, “sobrinhos” que se acham designers super hiper mestres Jedis, desesperados e alguns estudantes de alguma área de design que ainda não aprenderam ética ou não perceberam o quão danoso é esse tipo de padrão de negócios.

Em seguida, esses “profissionais” passam horas de seus dias, já que possuem tempo disponível, fazendo umas “logos bonitinhas” no CorelDRAW ou Illustrator, a partir de pedaços de identidades visuais que eles encontram no Google Images. Estes então mandam duas, talvez três, variações dessa “logo bonitinha” e cruzam os dedos na esperança de ganhar um trocadinho para comprar uma bermuda na C&A.

Então o empresário que contratou a empresa vai ver as “logos bonitinhas”. O cara não tem a menor noção de design e não entende nada de propaganda ou da importância da forma como a empresa dele será vista pelo público. Somente quer uma “logomarca bonitinha”. Daí ele vê aquela que ele mais simpatiza e pensa: “Sou muito comelão, escolhi a melhor e ainda paguei pouco”.

No final, vários micreirinhos, sobrinhos e estudantes vão ficar chorando triste no canto da sala e ter extremas crises de depressão, talvez usando as marcas em algum portfólio feito no WIX, enquanto o ganhador, se achando agora “o designer” irá comprar sua bermuda. O dono da empresa de Design Contests estará rindo a toa, pois não teve trabalho nenhum e ainda arrumou coisa para colocar no seu portfólio e aparecer em programas duvidosos como o Pequenas Empresas Grandes Negócios que premia as empresas por quanto elas ganharam e não por seus valores e qualidades. Claro, com o auxílio de alguns consultores do Sebrae (não todos, mas boa parte), que incentivam os péssimos negócios para a área de Design Digital e Tecnologia.

Qual o Resultado de Tudo Isso?

O Cliente, que não tem obrigação de entender o que é design, escolhe a “logomarca” (sim, eu sei que é um termo incorreto) de acordo com seus gostos pessoais.

Ou seja, não foi uma decisão feita por ser o melhor estudo de público, nem funcionalidade, nem por método heurístico, nem nada. Simplesmente foi escolhido no gosto e no achismo. Que resultado podemos esperar para essa empresa pelos olhos de seu público?

Além disso, dezenas de pessoas que participaram dessa concorrência não receberão nada, mesmo se talvez tenha apresentado um projeto melhor. Ou seja, irão perder seu tempo em vão. Tempo que poderiam fazer coisas mais importantes, como estudar filosofia do design, cores, Bauhaus, psicologia, geometria, etc.

Esse tipo de processo também causa uma desvalorização da área de design. O cliente comum irá acreditar que o preço para uma identidade visual, organizada e funcional será o mesmo que o de uma Concorrência. Isso criará um grande problema para argumentar sobre os valores que o designer de verdade está cobrando. As pessoas concluirão que design nem dá trabalho.

Para a empresa de Design Contest, será ganhar dinheiro sem ter que fazer nada e ainda levar todo o crédito. Uma ideia inteligente, do ponto de vista monetário, mas extremamente anti-ética.

Concorrência x Concurso

Todavia, é necessário deixar claro a diferença de concorrência para concurso.

Enquanto a concorrência trata-se de um trabalho comercial sob promessa de pagamento especulativo, o concurso se trata de uma atividade lúdica, premiada ou não, sem que a finalidade do artefato gráfico seja o uso comercial da mesma.

Ou seja, a concorrência é “Me apresente algo para que eu use na minha empresa, se eu gostar.”, enquanto o concurso é “Vamos nos reunir e premiar o trabalho melhor para estimular o estudo da comunidade”.

Por exemplo, em um concurso vários profissionais vão apresentar ideias, sobre um determinado tema, e discutir entre si. O projeto resultante é do profissional, assim como a decisão de seu uso. O prêmio vai ser entregue a alguém e o objetivo é lúdico, é diverti-se e dividir experiências.

Concluindo

Se você é designer de verdade, pule fora dessa. Nem relógio trabalha mais de graça, que tem que trocar pilha, ou parar para ficar dando corda.

Se você é empreendedor, não caia em conversas de certos consultores de procurar coisas extremamente baratas ou de sites idiotas que fazem concursos. Se você PRECISA de um designer, então a decisão do que é melhor NÃO É SUA. Você pode e DEVE opinar, MAS NÃO DECIDIR. Você não contrata um profissional para dizer como deve ser feito o seu trabalho. No caso de design, diga o que espera do resultado e como quer que o seu público reaja. Mas as decisões de como isso será feito é do designer, afinal, é esse o trabalho dele.

Ou seja, no final de tudo, o empresário vai acreditar que foi feito um bom trabalho, mas o mais provável é que seja horrível, pois a escolha de um profissional de publicidade e comunicação não é feita a partir de seu gosto individual, mas sim do que o público se agrada e precisa.

Por último, se você é proprietário de um site de Design Contest… #FUCKOFF!

Para atualização, segue o Artigo 12 do código de ética da ADG (Associação dos Designers Gráficos)

Artigo 12º – O Designer Gráfico não deve, sozinho ou em concorrência, participar de projetos
especulativos pelo qual só receberá o pagamento se o projeto vier a ser aprovado.

1.  O Designer Gráfico pode participar de concursos, abertos ou fechados, cujas condições sejam aprovadas pela entidade de classe;
2. Uma taxa administrativa justa pode ser adicionada, com o conhecimento e compreensão do cliente, como porcentagem de todos os itens reembolsáveis pelo cliente que tenham passado pela contabilidade do Designer Gráfico;
3. O Designer Gráfico que é chamado para opinar sobre uma seleção de designers ou outros consultores não deverá aceitar nenhuma forma de pagamento por parte do designer ou consultor recomendado.

Programador é o profissional responsável por resolver, replicar ou adequar soluções de software a fim de que um computador ou equipamento eletrônico com micro-controladores, execute uma tarefa.

O principal custo do programador é, sem dúvida, em educação. Porém, ainda sim, é bem variável, pois baseia-se nas tecnologias que este deseja se especializar.

O lado positivo é que muitas ferramentas para programadores são gratuitas, como o Brackets, Notepad++, assim como muitas linguagens, como o PHP, Java, C e outras.

Educação

Desenvolvedores precisam investir muito, muito mesmo, em livros e livros de tecnologia não são nada baratos. Dificilmente é possível encontrar um livro intermediário por menos de 200 reais 250 reais.

Faculdades são um problema à parte. Apesar de várias faculdades de tecnologia aparecerem no país, a maioria focada em desenvolvimento não estão preparadas para preparar um aluno ao mercado de trabalho. Na própria faculdade, muitas vezes, possuem definições distorcidas de lógica e metodologias que não se adequam àqueles que já possuem intimidade com o computador, além de simplesmente ignorar assuntos como história e sociedade. Isso obriga a, mesmo os formados, procurarem especializações mais específicas para suas áreas, o que não é um negócio muito barato. Como é muito comum professores darem preferência a uma linguagem específica ao invés da lógica como um todo, muitos alunos, para conhecerem outras tecnologias, alternativas e métodos, precisam investir em cursos de especialização.

Boas faculdades particulares de tecnologia tem seu custo médio variável entre 300 a 1500 reais 750 a 2000 reais por mês. Sendo que cursos de especialização ou específicos, tem seu custo em média de 900 a 3 mil reais por curso, podendo ter alguns mais baratos se vinculados a cursos de extensão de faculdades (principalmente as públicas). Algumas palestras e workshops, com pessoas importantes na área, podem também chegar ao valor equivalente a um curso.

Certificação

A certificação é uma prova, muitas vezes mais importante do que um diploma, de que o desenvolvedor tem domínio em uma determinada área ou ferramenta. Geralmente atrelado a uma tecnologia/linguagem específica, a certificação é bem aceita no mercado de trabalho e envolve testes realmente difíceis para passar. As certificações podem variar de 800 a 30 mil reais 1500 a 40 mil reais, dependendo da área escolhida e se esta virá ou não acompanhada de um curso. Geralmente, quando se falha na prova, é necessário pagar novamente para uma segunda tentativa.

Máquina

A potência da máquina do programador varia da linguagem em que ele desenvolve e o objetivo de sua aplicação. Se ele optar por se especializar em PHP ou ASP, certamente ele não precisará de um computador que seja tão rápido. Entretanto, se ele trabalhar com Java, por exemplo, ele precisará ter um computador com pelo menos 4GB 8GB de RAM (pois é… Java tá pesado). Já aqueles que trabalham com desenvolvimento de jogos ou de aplicativos pesados que exijam opções gráficas, simulação ou alta precisão, precisarão de um computador realmente caro, na faixa dos 8 a 15 mil reais 10 a 21 mil, que possui uma configuração mais robusta. Se ele trabalhar com servidores, além de ter que ter mais de um, ele gastará uma quantia considerável para estudos e testes destes.

Comunicação

Grande parte de soluções e pesquisas podem ser encontradas na internet. O que exige que o programador tenha uma conexão realmente rápida. Hoje em dia, um profissional de TI precisa de uma conexão de pelo menos 20Mbps, o que gera um custo bem maior em comparação a quem tem uma internet comum em casa, e isso pode variar de região do país. Os que trabalham com gerenciamento de servidores a distância gastam muito mais, pois precisam de uma conexão ainda mais rápida para configurar e operar os mesmos sem perda de tempo ou informação. Ligações constantes para dar assistência a programadores e operadores também é comum, o que faz ter um alto custo com telefonia celular e fixa.

É difícil prever os custos exatos para comunicação. Os preços mudam muito de uma região do país para outras. Até mesmo de bairro para bairro o preço e velocidade máxima de conexão é absurdamente diferente.

Eventos

Como todo o profissional, o programador precisa estar atualizado com as últimas novidades de sua área. Precisa participar de eventos e promover encontros com outros desenvolvedores para criar melhores ações e estratégias para resolver seus problemas.

Porém eventos custam dinheiro principalmente para quem não mora no eixo sul do país, onde estão concentrados a maioria dos encontros. O problema é que, muitas vezes, não são as empresas que enviam os funcionários. Os programadores precisam pedir licença e custear do próprio bolso.

Na melhor das hipóteses, o custo para uma viagem não é menor que 2 mil reais (caso você seja alguém bem econômico e não se importe em dormir em albergues ou Airbnb), se for para uma cidade próxima. Caso seja internacional, prepare-se para um custo na faixa dos 12 mil reais.

E quanto ganha um programador?

Isso varia muito, de acordo com a região do país e de empresa para empresa. A média é que um desenvolvedor ganhe entre 3 mil e 30 mil reais, dependendo de sua função, para mais. Estudantes e programadores Jr, ganham em média de 1500 a 2500 reais (isso não mudou muito de 2013 pra cá).

O problema é que as empresas não estão dispostas a pagar corretamente por seus programadores ou ainda dão condições de trabalho que não correspondem com a área, como computadores ruins ou obrigatoriedade de uniformes e falta de flexibilidade no horário.

Por outro lado, alguns profissionais trabalham como autônomos dando consultorias para empresas. Entretanto, esses profissionais precisam ter uma certa “fama” em seu seguimento. Alguns cobram até 60 mil reais por consultoria de 15 dias. Mas isso não quer dizer que são bons. Muitos programadores famosos são péssimos profissionais, mas vivem de sua fama, cobrando valores absurdos e apresentando soluções não eficientes (ou nenhuma) e mal se entrosam no projeto. Porém essa é uma questão mais ética.

Concluindo

O Programador, ao contrário do que possa parecer, não é um profissional de glória. Diferente do que fez parecer, a partir dos anos 90, raramente pessoas de talento e estudo conseguem receber um valor justo por seu trabalho. Geralmente, os “mestres de cerimônia”, que só tem fama e fazem parecer trabalhar, acabam sendo mais valorizados por causa de seu carisma.

Programador de verdade está sempre trabalhando, sempre estudando, sempre se esforçando. Sempre interessado em evoluir e melhorar os seus projetos. Para um programador legítimo, um projeto quase nunca está perfeito. Mas é sempre incrivelmente gratificante depois de passar horas tentando fazer algo complicado, finalmente conseguir. É uma sensação extasiante e inexplicável.

Por muitas vezes, perguntei a alguns amigos designers qual era a configuração da máquina em que eles trabalhavam. Alguns me respondiam “Windows 7”, outros me respondiam, “ah é um Mac”. Mas, na realidade, o que eu queria saber era quanto de RAM, quanto de HD, qual o processador, placa de vídeo e, para minha surpresa, sempre me deparava com um “o quê?”, “como é?”, “sou designer. Não tem nada a ver eu saber disso”. Isso é decepcionante.

As vezes é necessário criar grandes formatos ou editar vídeos, talvez um pouco de 3D, então precisa de um computador que possa dar suporte as suas necessidades. Mas como saber se o que precisa é de mais RAM ou mais processamento? Ou se na verdade você simplesmente já tinha tudo certo, mas nem sabia que existiam Sistemas Operacionais 64 bits? Aliás, nem sequer sabia o que era 64 bits?

Existem muitos designers que enchem um site de estruturas complexas e somente camadas de PNG, ou gigantescas manobras de canvas, para poder montar algo vistoso. O designer necessita se preocupar com a tecnologia que o seu usuário usa e qual a configuração média do dispositivo, de acordo com a proposta do aplicativo, site ou artefato. Essa é outra razão para compreender como funciona computadores e dispositivos móveis.

Devo comprar um laptop ou um desktop

Laptops são computadores portáteis, conhecidos no Brasil como notebooks. Já os Desktops são computadores de mesa. A vantagem do primeiro é a mobilidade, porém, essa mobilidade tem um custo mais elevado, que pode ser refletido tanto em preço, quanto em performance. Independente do que você precisar comprar, fique atento as questões abaixo para que você possa escolher melhor a sua máquina. Para tanto, vamos listar por componentes mais comuns.

Processadores

O processador, ou a CPU (Unidade Central de Processamento), é o elemento que mais gera dúvidas a respeito de performance. Para quem trabalha com vídeos ou edição de som, o processador é fundamental para garantir uma renderização mais rápida. Já para quem trabalha com imagens estáticas, como o Photoshop ou Illustrator, ele vai acelerar o tempo de adição de efeitos e filtros. Para quem trabalha com web e desenvolvimento, a performance do processador é mais importante para virtualização, seja para dispositivos móveis ou máquinas virtuais.

Basicamente, há duas empresas quando o assunto é processadores: Intel e AMD. Com isso, vale a atenção a algumas características que podem enganar o consumidor mais desatento: As marcas i3, i5 e i7 são nomenclaturas puramente comerciais. A grande maioria dos laptops i7, por exemplo, são da linha U, que correspondem a um menor custo de energia, porém com uma performance inferior. A linha i7 XXX U, da Intel, por exemplo, apresenta menor clock e menor quantidade de núcleos, sendo comparado a um i3 para Desktops ou a um i5 da linha HQ, para laptops. Por isso, antes de se pensar em nomes comerciais, é necessário ficar atento a algumas características, como:

Clock → Digamos que seja a velocidade do processador. Ele é determinado a partir de métrica de frequência. Um processador mínimo, para quem trabalha com programas gráficos, é de 2,6GHz. Esse clock deve ser mais poderoso, caso o objetivo seja trabalhar com renderização de vídeo e 3D, onde é aconselhado pelo menos 3,2GHz. A tendência é que quantos mais GHz, mais rápido será a renderização.

Núcleos (Core) → Esse é um assunto polêmico. A necessidade de uma quantidade maior ou menor de núcleos depende da disponibilidade do aplicativo de usar ou não esses núcleos. Uma quantidade maior de núcleos significa que o processamento será dividido e executado simultaneamente entre eles, aumentando, por consequência, a performance. Os núcleos podem ser físicos ou lógicos (geralmente representado como Número de Threads). A diferença é que o núcleo físico realmente o número de núcleos no processador, enquanto o virtual emula núcleos dentro da CPU, com o objetivo de dividir as tarefas. Os núcleos físicos possuem performance superior, porém, mesmo processadores com 4 ou mais núcleos, tendem a possuir núcleos virtuais para somatizar a performance. Muitos núcleos são recomendados para quem trabalha com bastante 3D ou precise trabalhar com máquinas virtuais. Vale lembrar que a quantidade de vários núcleos significa que o computador irá dividir mais processos simultaneamente, ficando assim mais rápido, caso o programa usado dê esse suporte. A grande maioria dos programas profissionais modernos (programas da Adobe, AutoDesk, alguns compiladores, etc.) usam bem as várias threads do processador.

Cache → A memória cache representa o tamanho da informação que o processador poderá processar por vez. Quanto mais memória cache, mais tarefas o processador poderá executar em um curto espaço de tempo e, por consequência, maior performance. Muitos consideram a memória cache mais importante do que o Clock. É importante salientar que a quantidade de memória varia de núcleo para núcleo. Desse modo, segue a mesma lógica do clock, quanto mais você tiver, melhor vai ser sua performance para renderização. No entanto, atenção, a Intel mostra o cache POR NÚCLEO, enquanto a AMD tem o costume de mostrar a SOMA do cache. Então fique atento e observe sempre, nas configurações, o cache por núcleo. A partir de 4MB de cache L3 é interessante para quem trabalha com impressos, web e aplicativos. Para quem trabalha intensamente com vídeo e 3D, 8MB, ou mais, de cache L3 é mais recomendado.

O site CPU BOSS vai ajudar você a ter uma ideia de comparação na hora de escolher um processador.

Memória RAM

Até o começo dos anos 2000, muita memória RAM era sinônimo de altíssima performance. Isso porque a memória RAM, ou Memória de Acesso Aleatório, é responsável por guardar as informações que estão sendo executadas naquele momento. Em resumo, quanto mais memória RAM, mais programas abertos e mais pesados podem ficar abertos simultaneamente. O fato é que, hoje, os aplicativos são mais otimizados para consumir menos memória. Porém, para quem trabalha com projetos muito pesados, como revistas, livros e grandes formatos, uma quantidade razoável de memória RAM é muito importante. Já para quem trabalha com web, nem tanto. Já para virtualização, memória RAM é muito importante para dividir entre as máquinas virtuais. 8GB é o mínimo para quem trabalha com revistas e livros. Já para quem trabalha com web, 6GB é suficiente. Virtualização e vídeo, a partir de 16GB.

Placa de Vídeo

Nem todo computador tem uma placa de vídeo, mas todo ele tem um chipset ou um processador de vídeo. Hoje, existem duas opções no mercado: APU e GPU.

A APU é um tipo de processamento de vídeo que é compartilhado com o processador. Praticamente todos os processadores hoje possuem um processamento de vídeo incorporado. Mas esse vídeo incorporado não possui tanta performance quanto um processador de vídeo dedicado e também precisa usar parte da memória RAM.

Já a GPU é um processador dedicado de vídeo. As principais fabricantes são a nVIDIA e a AMD/Radeon. Por possuir um processamento próprio de vídeo e memória dedica, possui uma performance muito superior. Por isso elas são mais caras e exigem também mais energia e esquentam mais, o que pode ser algo que pese na opinião de alguém que queira comprar um computador, já que a fan (ventoinha) pode fazer muito barulho na hora que requer alto processaemnto.

Quem trabalha apenas com impressos, publicações e elementos institucionais, ou com desenvolvimento e web, não tem a necessidade de uma GPU. Uma APU o atenderá sem problemas. Porém para usar recursos mais avançados do Photoshop, como o 3D, uma GPU simples, dedicada, será o suficiente. Agora, se o intuito é trabalhar com 3D ou vídeo, então uma GPU mais parruda se faz necessário. Vale lembrar que é importante ver se o software que você usa, para edição de vídeo, usa mais a GPU ou a CPU para renderização. Esse último detalhe pode ser fundamental para uma escolha ideal.

Apesar do que pode parecer, a memória dedicada da GPU não é o ponto mais importante no que diz respeito a qualidade. Também a questão de núcleos não é tão importante assim, visto que processadores gráficos possuem uma quantidade absurda de núcleos em comparação a CPUs. A arquitetura da GPU quanto ao seu clock e a sua quantidade de memória é algo fundamental para analisar. Por exemplo, a GPU Geforce 930M (para laptops), da nVidia, é suficiente para quem quer trabalhar com impressos, web e vídeos esporádicos. Já a GTX 780, também da nVidia, apesar de mais antiga, é melhor, porém apenas para desktops. No caso da nVidia, o que difere a qualidade está mais relacionada aos seus dois últimos dígitos, sendo que o primeiro especifica o quão recente é a arquitetura. Pessoas que trabalham com 3D de forma mais assídua, e as que usam a GPU para renderizar vídeos, precisam de GPUs mais potentes. Alguns podem juntar várias GPUs em uma única, somando o processamento (mas não a memória dedicada) e deixando a renderização mais rápida.

Usuários do Ubuntu, cuidado ao comprar uma placa de vídeo Radeon. Muitas não receberão mais atualizações para o sistema operacional, ficando inutilizável o OpenGL nas distribuições mais recentes. Fique atento ao modelo que for adquirir.

Para verificar e comparar GPUs, o site GPU BOSS vai te ajudar a escolher qual a melhor.

Displays e Monitores

Um assunto deveras delicado, mas bem simples. Designers precisam sempre de qualidade de resolução e brilho, além de fidelidade de cores. O foco é sempre na relação de taxa de atualização x polegadas x resolução x tecnologia. O ideal ainda é uma tela IPS ou OLED. A resolução FULLHD deve ser usada no máximo em um monitor de 21.5 polegadas, para não ficar incômoda a densidade de pixels. Recomenda-se uma resolução maior também para manter uma boa área de utilização em relação as ferramentas. Qualquer coisa maior que 21.5 polegadas deverá ser 2K ou 4K, para manter uma boa qualidade de imagem. Já no que diz respeito a frequência, praticamente todos os monitores hoje apresentam boa frequência, porém para quem trabalha com vídeos, pode tentar conseguir um monitor na faixa dos 100hz. Mas cuidado, fuja totalmente das telas TFTs.

HDD e SSD

Espaço de armazenamento nunca é demais, mas as vezes velocidade é mais necessário. Os HDs eletromecânicos (HDD) possuem a vantagem de serem mais baratos e, graças a tecnologia SMART, saber quando vão dar problemas e o usuário pode tomar uma previdência quanto a um backup. Além disso, por ser mais barato, a quantidade de espaço disponível é muito maior a um preço menor. O problema é que por serem mecânicos são mais lentos. O mais rápido que é possível encontrar no mercado é o de 7200RPM.

Já o SSD, é extramamente rápido, por não possuir componentes mecânicos, o tempo de abertura de um arquivo ou programa é até 90% mais rápido do que em HDD. Porém, no caso de queimarem ou ter um problema sério, eles simplesmente irão parar de funcionar. Não há uma forma prática de diagnosticar que o SSD vai dar problemas. O custo também é muito alto. SSDs podem chegar a preços até 10x mais caro que um HD de mesma quantidade de memória. Vale salientar que a velocidade do SSD varia entre marcas e modelos, mas sempre é mais rápido que os HDDs comuns.

Periféricos

Mouses e teclados são detalhes pouco discutidos, mas são importantes. Para começar, quem trabalha muito com programação, ou digita muito, pode preferir um teclado mecânico. Porém teclados mecânicos são bem mais caros que o convencionais e fazem mais barulho, em contra partida possuem resposta muito mais rápida e eficiênte, o pressionar é mais confiável. Já no que diz respeito a mouses e touchpads, isso é uma questão realmente de adaptação, você precisa experimentar qual é o mais ideal para a sua mão. Procure mouses com DPIs mais altos, pois possuem maior precisão. No que diz respeito as Pen Tablets (erroneamente chamado de Mesa Digitalizadora), pouquíssimas pessoas realmente precisam deles e vão utilizar. A maioria das pessoas que as tem, compram por questão de status ou de uma ideia errada da atualização. O uso das PenTablets é maior para pessoas que realmente trabalham com ilustração matricial ou que precisem retocar imagens com frequência.

Obs. este artigo é de 2015. Então fiquem de olho nas atualizações dos hardwares.

Por fim, desktop ou laptop

Laptops costumam ser mais caros e ter uma performance inferior aos desktops de preços equivalentes. Além disso, você está à mercê das opções disponíveis no mercado, não vai ter a liberdade para montar uma máquina que julgar ideal. Mas os laptops possuem a vantagem da mobilidade e de ocupar um menor espaço físico, pode-se trabalhar em qualquer local e se deslocar a escritórios diferentes. Muitas pessoas preferem usar laptops com monitores separados, quando em estações de trabalho. Quando comprar um laptop deve-se ficar muito atento ao processador e a GPU, que, na maioria das vezes, possuem baixa qualidade para poder baratear os custos e melhorar a performance da bateria. Se comprar um laptop, opte primeiro por adquirir nas lojas oficiais, físicas ou online, salvo promoções pontuais, na loja da marca costuma ser mais barato e ter melhores condições.

Desktops possuem a vantagem de serem flexíveis, mais baratos e ter melhor performance. Porém exige muito espaço físico e você não há boa mobilidade. Consomem mais energia e é necessário um pouco mais de experiência para montar um equipamento que realmente agrade. Na grande maioria das vezes, ainda é possível fazer atualizações, aumentando o tempo de vida útil do computador, adicionando com o tempo uma placa de vídeo melhor ou mais RAM, trocar o processador ou adicionar periféricos. Tudo de acordo com as necessidades que forem surgindo. O ideal é comprar as peças e montar, pois a maioria das empresas que entregam o PC pronto tendem a escolher componentes de mais baixa qualidade para diminuir os custos.

Atenção: No momento em que receber o computador, seja ele um laptop, desktop ou até mesmo montado por você, faça todos os testes possíveis. Processamento, GPU, APU, etc. Use ferramentas de Benchmark de terceiros para isso. Não utilize as ferramentas da própria empresa da marca do computador que você comprou. Muitas vezes, elas não fazem os testes necessários para averiguar realmente todos os elementos do hardware.

Conhecer a sua própria máquina é mais que um luxo, é uma obrigação. Entender qual a nova tecnologia que entrará no mercado, e se adaptar a elas, é importante para se manter em um mercado cheio de concorrência, algumas até desleiais. Não estou falando de entender o que é um transistor, ou de fazer um curso de montagem e manutenção em algum “cursinho” por aí, mas sim, de entender o porquê de você comprar um processador de 4 núcleos, entender a diferença de uma GTX 930 para uma GTX 970, saber porque está comprando 16GB de RAM e não somente 8GB. Só assim você terá como tirar o maior proveito possível de seu computador e não fazê-lo tornar somente um elefante branco.