A partir da atualização de Oubro de 2017, a Adobe incluiu novas funcionalidades para fluxo de trabalho.
Agora é possível que um web designer ou desenvolvedor crie soluções práticas de fluxo de trabalho utilizando o chamado CEP (Common Extensibily Platform), que permite executar estenções ricas baseadas em HTML5 nos produtos Adobe, com suporte ao Node.JS/NPM.
Alguns dos exemplos que são possíveis trabalhar incluem conversão de RAW, publicação automática em mídias sociais, integração com nuvem, conversão, etc. com a possibilidade de usar recursos do XMP e da API Vulcan. Recursos que já se encontravam disponíveis para outros programas da empresa, que agora estão disponíveis para o Bridge a partir da versão 8.0 do CEP.
Os exemplos disponibilizados no Github já podem ser executados em seu Bridge CC, apenas habilitando o modo debug da ferramenta.
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.
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 ainda estou novo em NodeJS, ainda preciso resolver alguns problemas, que vou citar abaixo, mas o aplicativo já é utilizável em diversas circunstâncias.
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):
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.
O final do ano é o momento perfeito para aprender CSS com efeitos divertidos para o Ano Novo. Graças aos navegadores modernos, podemos fazer animações e efeitos interessantes e divertidos de forma leve e funcional. Que tal fazer um efeito neon divertido e interessante sem nenhum framework?
ATENÇÃO: Devido a quantidade de código e efeitos nesta página, pode apresentar lentidão se você for testar os exemplos abaixo em dispositivos móveis mais antigos (e até alguns mais recentes). Se você fizer o uso comedido, você não encontrará esse tipo de problemas.
Adicionando a Logo SVG
Para poder funcionar de forma leve, precisamos que a imagem que vamos adicionar seja em SVG. Dessa forma podemos manipular seus parâmetros de forma simples e adicionar efeitos.
Vários programas permitem exportar os objetos em SVG. Inkscape (que é de código aberto e gratuito), Illustrator ou CorelDRAW, todos eles possuem uma área de exportação específica.
No Illustrator, você pode usar a opção Exportar para Telas. Importante salientar que, para ficar com um melhor acabamento, coloque apenas contornos, sem preenchimento no objeto.
Opção de Exportar para Telas, no Adobe Illustrator CC
O resultado será um arquivo de extensão SVG. O interessante é que você pode abrir esse arquivo em qualquer editor de texto e ver os detalhes. Você deverá guardar esse arquivo para uso posterior no HTML.
Montando o HTML
Uma vez criado o SVG, precisamos montar o HTML. Para isso, basta criar a área e organizar as classes e ids de forma apropriada, ficando:
Em seguida, vamos colocar o SVG acima do h1. Para isso, basta copiar o código gerado acima do SVG. Em seguida, adicione a classe específica que vamos usar no CSS e mude (caso necessário) para uma id mais fácil de compreender.
Porém, para ficar mais legal, devemos usar uma tipografia mais apropriada. No Google Fonts podemos encontrar tipografias interessantes, com cantos arredondados, que nos darão resultados mais interessantes.
Uma vez escolhida a fonte, clique no Select this Font (no Google Fonts) e ele vai dar um código similar a este abaixo, que você deverá colocar dentro do header do seu HTML.
Neste momento precisamos pensar em instâncias. O Neon pode estar ligado ou desligado. Por isso, precisamos pensar nos objetos das duas formas.
Leia os comentários no código para entender o seu funcionamento.
<style>
/*
Configuração do container
onde ficará os Neons
*/
.area_neon{
background-color: #0F0F0F;
font-family: 'Nunito', sans-serif;
left: 0;
right: 0;
bottom: 0;
top: 0;
padding: 20px;
padding-top: 40px;
position: absolute;
}
/*
Base do Neon apagado (TEXTO).
Iremos simular um efeito as lâmpadas
de neon apagadas.
*/
.area_neon h1.neon{
font-weight: 400;
font-size: 7em;
/**
O filtro BLUR deve ser mantido em 0, porque
iremos usa-lo quando ligado.
Para a animação de transição funcionar
corretamente, ele precisa ser declarado
mesmo desligado.
**/
filter: blur(0);
/**
Para simular a lâmpada, colocaremos um
contorno bem suave, para delimitar o
objeto, porém com o fundo
quase transparente
**/
-webkit-text-stroke: 1px rgba(255,255,255,0.1);
color: rgba(255,255,255,0.1);
/**
O TextShadow e o BackgroundClip
irá servir para colocar um efeito de
profundidade no objeto
**/
text-shadow: -5px 5px 5px black;
-webkit-background-clip: text;
/**
O Transition é responsável por
adicionar uma sensação de animação
entre os eventos.
**/
transition: all ease 1s;
}
/**Texto com o Neon Ligado**/
.area_neon h1.neon.on{
/**
Será fundametal o desfoque para dar
a sensação de luminosidade.
**/
filter: blur(1px);
/**
Um objeto com luz precisa possuir seu
centro branco, caso contrário, vai dar
a sensação de que está apenas com um
sombreamento e não com luz.
Por isso, devemos manter a cor branca,
que vai representar o centro luminoso,
e a borda da cor que desejamos usar.
O TextShadow será a luminosidade do
ambiente vinda da luz do Neon.
O contorno e a sombra deverão ser
da cor que você escolher para o neon,
mas a cor do texto deverá ser sempre
branca.
**/
color: white;
-webkit-text-stroke: 1px #00FFB3;
text-shadow: 0 0 5px #CCFFF7, 0 0 200px #00FFDB;
-webkit-background-clip: none;
}
/**
O neon para a imagem SVG terá que ser
um pouco diferente, mas podemos
manter a mesma lógica.
**/
.area_neon svg.neon_img{
width: 50%;
margin: 0 auto;
/**
Ao invés de usarmos color, usaremos
o parâmetro FILL para poder determinar a cor
do objeto e o STROKE para a borda.
Porém usaremos as mesmas lógicas
usadas no Texto
**/
fill: rgba(255,255,255,0.1);
stroke: rgba(255,255,255,0.1);
filter: blur(0) drop-shadow(-5px 5px 5px black);
/**
Usaremos o drop-shadow aplicado no filter,
para poder ter o efeito similar ao do texto.
**/
transition: all ease 1s;
}
/**SVG com o neon Ligado**/
.area_neon svg.neon_img.on{
/**
Aqui aplicamos a mesma lógica usada
no texto, porém adaptada para o tipo de objeto.
**/
fill: white;
stroke: #F0FF00;
filter: blur(1px) drop-shadow(0 0 10px #F0FF00) drop-shadow(0 0 200px #F0FF00) ;
}
</style>
Ligando o Neon
Vamos usar o Javascript puro para ligarmos a luz. Tudo o que precisamos é adicionar on ao parâmetro classe das tags HTML correspondentes.
Para isso vamos criar a função turnOn():
<script>
function turnOn(){
var texto = document.getElementById("texto_neon");
texto.className = texto.className.concat(" on");
var imagem = document.getElementById("img_neon");
imagem.setAttribute("class", imagem.getAttribute("class").concat(" on"));
//Repare que temos que usar setAttribute no SVG. Isso porque o SVG não possui o mesmo comportamento de uma tag HTML comum
}
</script>
Para melhorar a experiência do usuário, profissionais front-end costumam buscar formas de automatizar certos preenchimentos de cadastros. Além disso, essas formas de carregamento trazem mais integridade para os dados, diminuindo ou evitando a digitação errada de campos que podem vir a ser usados em busca. Sem dúvida, um dos carregamentos dinâmicos mais usados em cadastros é a busca automática por CEP.
Para este exemplo/tutorial, iremos usar jQuery e HTML.
Carregando o Endereço Dinamicamente pelo CEP
Talvez o mais famoso repositório público para preenchimento de CEP (sem a necessidade de uma integração com os Correios), deve ser o ViaCEP.
A API do ViaCEP possui uma integração com json, que é o que usaremos aqui.
O ViaCEP nos retorno os seguintes dados, com as respectivas chaves:
“cep”,
“logradouro”,
“complemento”,
“bairro”,
“localidade”,
“uf”,
“unidade”,
“ibge”,
“gia”
Para exemplificarmos, vamos usar um formulário HTML simples: (Usaremos a base de estados capturado a partir do GitHub de Cassio Cardoso)
Agora vamos executar uma função para que no momento após sair do campo CEP, ele faça a busca e preencha os demais campos. Como é no momento após deixar o campo, iremos vincular ao evento focusout.
<script type="text/javascript">
$("#cep").focusout(function(){
//Aqui vai o código
});
</script>
Agora temos que chamar a API json dentro da nossa função. Para isso, vamos utilizar o comando $.ajax, do jQuery.
Obs. Acompanhe os comentários no código para entender cada linha.
<script type="text/javascript">
$("#cep").focusout(function(){
//Início do Comando AJAX
$.ajax({
//O campo URL diz o caminho de onde virá os dados
//É importante concatenar o valor digitado no CEP
url: 'https://viacep.com.br/ws/'+$(this).val()+'/json/unicode/',
//Aqui você deve preencher o tipo de dados que será lido,
//no caso, estamos lendo JSON.
dataType: 'json',
//SUCESS é referente a função que será executada caso
//ele consiga ler a fonte de dados com sucesso.
//O parâmetro dentro da função se refere ao nome da variável
//que você vai dar para ler esse objeto.
success: function(resposta){
//Agora basta definir os valores que você deseja preencher
//automaticamente nos campos acima.
$("#logradouro").val(resposta.logradouro);
$("#complemento").val(resposta.complemento);
$("#bairro").val(resposta.bairro);
$("#cidade").val(resposta.localidade);
$("#uf").val(resposta.uf);
//Vamos incluir para que o Número seja focado automaticamente
//melhorando a experiência do usuário
$("#numero").focus();
}
});
});
</script>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Teste</title>
</head>
<body>
<!--Importando Script Jquery-->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<!--Formulário-->
<form>
<label for="cep">CEP</label>
<input id="cep" type="text" required/>
<label for="logradouro">Logradouro</label>
<input id="logradouro" type="text" required/>
<label for="numero">Número</label>
<input id="numero" type="text" />
<label for="complemento">Complemento</label>
<input id="complemento" type="text"/>
<label for="bairro">Bairro</label>
<input id="bairro" type="text" required/>
<label for="uf">Estado</label>
<select id="uf">
<option value="AC">Acre</option>
<option value="AL">Alagoas</option>
<option value="AP">Amapá</option>
<option value="AM">Amazonas</option>
<option value="BA">Bahia</option>
<option value="CE">Ceará</option>
<option value="DF">Distrito Federal</option>
<option value="ES">Espírito Santo</option>
<option value="GO">Goiás</option>
<option value="MA">Maranhão</option>
<option value="MT">Mato Grosso</option>
<option value="MS">Mato Grosso do Sul</option>
<option value="MG">Minas Gerais</option>
<option value="PA">Pará</option>
<option value="PB">Paraíba</option>
<option value="PR">Paraná</option>
<option value="PE">Pernambuco</option>
<option value="PI">Piauí</option>
<option value="RJ">Rio de Janeiro</option>
<option value="RN">Rio Grande do Norte</option>
<option value="RS">Rio Grande do Sul</option>
<option value="RO">Rondônia</option>
<option value="RR">Roraima</option>
<option value="SC">Santa Catarina</option>
<option value="SP">São Paulo</option>
<option value="SE">Sergipe</option>
<option value="TO">Tocantins</option>
</select>
</form>
<script type="text/javascript">
$("#cep").focusout(function(){
//Início do Comando AJAX
$.ajax({
//O campo URL diz o caminho de onde virá os dados
//É importante concatenar o valor digitado no CEP
url: 'https://viacep.com.br/ws/'+$(this).val()+'/json/unicode/',
//Aqui você deve preencher o tipo de dados que será lido,
//no caso, estamos lendo JSON.
dataType: 'json',
//SUCESS é referente a função que será executada caso
//ele consiga ler a fonte de dados com sucesso.
//O parâmetro dentro da função se refere ao nome da variável
//que você vai dar para ler esse objeto.
success: function(resposta){
//Agora basta definir os valores que você deseja preencher
//automaticamente nos campos acima.
$("#logradouro").val(resposta.logradouro);
$("#complemento").val(resposta.complemento);
$("#bairro").val(resposta.bairro);
$("#cidade").val(resposta.localidade);
$("#uf").val(resposta.uf);
//Vamos incluir para que o Número seja focado automaticamente
//melhorando a experiência do usuário
$("#numero").focus();
}
});
});
</script>
</body>
</html>
