No dia 13 de Janeiro (EST), os havaíanos receberam alertas em seus telefones e televisão de que uma míssil balística estaria indo em direção a ilha.
O alerta foi imediatamente confirmado como falso através de outra notificação e anúncio enviado em seguida.
O alerta dizia em tradução aproximada:
“AMEAÇA DE MÍSSIL BALÍSTICO SOB O HAVAÍ. PROCURE ABRIGO IMEDIATO. ISTO NÃO É UM TREINAMENTO.”
HAWAII – THIS IS A FALSE ALARM. THERE IS NO INCOMING MISSILE TO HAWAII. I HAVE CONFIRMED WITH OFFICIALS THERE IS NO INCOMING MISSILE. pic.twitter.com/DxfTXIDOQs
Tusli Gabbard, congressista do Havaí, já afirmou logo que não havia perigo e que se tratava de um alarme falso. Até então o incidente ainda estava sendo investigada, mas segundo o governador David Ige, o falso alarme seria resultado de um erro humano. “(…)um funcionário apertou o botão errado”, afirmou o parlamentar. Porém, a confirmação de falso alerta teria demorado 30 minutos para ser confirmado.
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.
JetBrains disponibilizou a tecnologia Kotlin/Native, que cria binários nativos de um código Kotlin, de forma não ser necessária uma máquina virtual Java para rodar.
A versão beta da IDE CLion permite que programas Kotlin sejam compilados diretamente em um formato a ser executado de forma nativa pelo sistema operacional.
Kotlin/Natives usa um compilador LLVM (Low Level Virtual Machine) para gerar o código. Um LLVM back-end, rodado em tempo de execução e parte do gerador de códigos nativos são fornecidos como parte do beta do CLion.
Os desenvolvedores acabaram de receber a atualização do JDK 9, em Setembro do ano passado. Porém, a Oracle já anunciou que a versão 10 está lançada para lançamento em 2018. Ainda em 2017, a Oracle declarou planos para que hajam lançamentos de novas versões Java a cada seis meses.
Dentre as diversas atualizações, os principais recursos incluem melhorias importantes no coletor de lixo, melhor controle de memória, novos tipos de variáveis locais, um novo compilador experimental just-in-time (experimental para plataforma Linux x64), melhorias para CA e handshake que tendem a facilitar o uso com webservices, dentre outras.
Portfólio sempre foi um tema complicado. Mesmo o mais perfeito projeto pode ser mal compreendido ou mal visto se não organizado corretamente. Muitos serviços prometem uma organização de portfólio funcional, mas a maioria não funciona como deveria.
Mesmo os profissionais com conhecimento em programação front-end e web, ou especialistas em web design, possuem dificuldades para organizar projetos tão diferentes entre si em uma mesma página ou conjunto.
Um dos melhores serviços, porém pouco conhecido, para organização de portfólio é o Adobe Portfolio.
Behance
Em 2012, a Adobe adquiriu o Behance por 150 milhões de dólares em dinheiro (ou seja, nada de troca de ações ou acordos posteriores). A ideia da Adobe era vincular a mídia social de portfólios à sua suite Creative Cloud. Com isso a Adobe resolveu vincular o serviço Behance ProSite a todos os clientes de sua plataforma. Em 2016, a Adobe oficializou o nome Adobe Portfolio como uma evolução dessa ferramenta.
Não é incomum a Adobe comprar softwares e serviços. Seus principais aplicativos como Photoshop, Illustrator, Indesign, Premiere, After Effects e até mesmo a tecnologia aplicada ao Creative Cloud são resultados de compras e evoluções de ferramentas com o passar dos anos.
Adobe Portfolio
O Adobe Portfolio é um serviço vinculado ao Adobe Creative Cloud, seja pelo plano de fotografia ou pelo plano completo, que pode ser acessado diretamente pelo painel do Creative Cloud ou através do site https://myportfolio.com.
O aplicativo web consiste em um conjunto de ferramentas que permite que você faça sua própria página na web, de forma personalizável, a partir de uma série de templates bases. Todos esses templates possuem características básicas, como responsividade, imagens destacadas grandes e opções de criação de páginas.
Ao escolher o leiaute, caso já possua uma conta no Behance, simplesmente importe os projetos que você já tem cadastrado lá. Caso não tenha, você pode enviar as mídias e detalhes do projeto diretamente pela ferramenta. Agora, se o seu negócio é fotografia, o Adobe Portfolio ainda possui integração com o Lightroom, podendo ser atualizado diretamente pela aplicação mobile ou pela versão 2017, no Desktop. Inclusive, metadados são suportados.
Uma vez importado seus projetos, você pode adicionar diversas opções, como ícones de mídias sociais, links para páginas externas, adicionar sua identidade visual, modificar cores, editar e adicionar textos, dentre outras opções de design.
Antes de publicar, você ainda deve configurar as opções do site per si, como título, menus, organizações de dados no geral. Ainda deve especificar o favicon e pode criar um subdomínio myportfolio.com ou usar o seu próprio domínio (porém sem suporte a SSL), seguindo as informações passadas de DNS, em seu registar.
#Dica: Você pode encontrar o sitemap para utilizar no Google Console através de subdominio.myportfolio.com/sitemap.xml.
Uma solução rápida e prática
O Adobe Portfolio é uma solução eficiente que resolve a maioria dos casos. Possui responsividade, integrações simplificadas e muitas opções de personalização. Existem outras ferramentas para portfolios, algumas gratuitas ou vinculadas a templates de CMS, porém nenhuma é realmente tão simplificada. Além disso, a licença Creative Cloud (praticamente obrigatória para quem é designer) já te dá o direito de usar a ferramenta em sua totalidade, sendo, ao menos, uma plataforma a mais para divulgação de trabalho.
BitMail é um aplicativo desktop para envio de e-mails em lotes, criado com a tecnologia Electron / NodeJS. Este projeto é de código aberto e ainda está em beta e diversas funcionalidades não funcionam direito e apresentam falhas com o uso em alguns servidores de e-mail.
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.
Todo mundo que trabalha com design, fotografia ou simplesmente é um entusiasta em edição de fotos, certamento já deve ter ouvido falar do Photoshop. Todavia, há outras boas opções no mercado. Uma das mais recentes e mais fortes é o Pixelmator Pro, versão ainda mais completa do já muito bom Pixelmator, conhecido editor de imagens para Macintosh.
Interface Gráfica
O Pixelmator Pro foi criado pensando em profissionais de fotografia e manipulação digital. Por ser exclusivo para Mac e construído em cima da API Metal, toda sua estrutura gráfica segue os padrões usados na plataforma.
A tela de criação de novo arquivo agora mostra uma série de formatos pré-definidos. O mais interessante é que além de formatos mais conhecidos, como tamanhos de papel e de vídeo, sãos as predefinições de mídias sociais, que apresentam especificações prontas para diversos padrões de imagens para Instagram, Facebook, Twitter e outros.
A tela ainda permite escolher a profundidade de cor (até 16 bits) e tipos de unidade de medida para especificar o novo documento.
A interface do Pixelmator Pro apresenta uma formatação muito comum em aplicativos para correção de fotografia, com a maioria das opções e ferramentas apresentadas no lado direito da tela, deixando praticamente todo resto do espaço para a visualização do projeto. Ele segue uma estrutura bem similar ao Pixelmator para iPad. Ainda há algumas opções a mais no topo, como abas (quando necessário) e uma barra de camadas à esquerda, quando houver mais de uma.
Diferente de seu antecessor, essa versão do Pixelmator agora traz uma uma iconografia monocromática em cinzas, tal como sua tipografia, para não distrair o profissional.
Pincel e Pintura
A ferramenta pincel apresenta uma variedade enorme de pontas e compatibilidade com diversas pen-mouses e tablets. Totalmente personalizável, ela simula bem o comportamento de mistura de tintas e também permite importar e exportar pontas.
Ferramenta Organizar
Aqui a ferramenta mover / selecionar, equivalente, é nomeada de Organizar. Através dela você consegue modificar propriedades do documento ou de suas camadas, como rotacionar, ampliar, mover, alinhar e outros pontos organizacionais.
O diferencial aqui está no fato de que o controle é totalmente adaptado para os movimentos do trackpad.
Recortando um Objeto da Cena
Talvez um dos mais impressionantes recursos do Pixelmator Pro seja a ferramenta de Seleção Rápida. Ela funciona como uma mescla de Varinha Mágica com Pincel de Seleção, se comparado com o sistema da Adobe. É mostrado primeiro uma pré-visualização e, ao arrastar, o usuário pode definir a área de recorte de forma realmente rápida e simples e, o melhor, com uma qualidade que nos deixa realmente impressionados.
Uma outra promessa extremamente curiosa da aplicação é que ela promete a nomeação automática de camadas a partir de Machine Learning. Dessa forma, o designer não precisa se preocupar tanto com a nomeação de camadas e será mais simples uma atualização ou manutenção desse documento.
Ajustes de Fotos
Muito além dos ajustes de fotos tradicionais, que precisam de painéis e seleções individuais, o Pixelmator Pro apresenta uma área que é muito similar a editores de câmera RAW, inclusive o próprio Lightroom, porém com a vantagem adicional de ser possível salvar predefinições para que sejam utilizadas posteriormente. Ainda possui o modo que garante que a imagem original sempre seja preservada, lembrando muito a nova versão do software para fotografia da Adobe.
Efeitos e Pseudo Filtros
A opção de efeitos, que fizeram tanto sucesso no Pixelmator vanilla está de volta na versão Pro, porém mais poderoso, usando a segunda versão da API Metal, da Apple. Graças ao Metal, o uso otimizado da GPU permite que efeitos sejam aplicados e visualizados em tempo real, mesmo em imagens mais pesadas. Nos testes usamos um MacBook Pro de entrada, Mid 2012, sem GPU dedicada, e tivemos um resultado surpreendentemente bom mesmo com imagens de alta resolução.
O Pixelmator Pro traz efeitos já conhecidos de distorção, desfoque, mosaico, nitidez, dentre outros, e mais alguns que são exclusivos da plataforma, como o divertidíssimo efeito Caleidoscópio. Cada efeito tem suas particularidades e pode ser editados a partir de alças que são visualizados por cima da imagem.
Vetores
Em sua versão comum, é apresentado um conjunto de ferramentas vetorais com estilos e predefinições intitulado de Vectomator. Além de disponibilizar uma série de ícones e vetores prontos (a maioria precisa ser baixado), você ainda pode desenhar vetores simples de uma forma muito similar ao Illustrator. Infelizmente, sua exportação fica restrita a imagens matriciais, não sendo funcional para criação, por exemplo, de identidades visuais.
Tipografia
A tipografia talvez seja o ponto mais fraco da ferramenta. Apesar do excelente acabamento tipográfico do MacOSX, as funcionalidades entregadas pelo Pixelmator Pro são muito limitadas. Apesar de haver opções interessantes, o aplicativo não entrega tudo o que poderia, obrigando o usuário a ter que converter o texto para forma ou pixel para que possa usar opções comuns, como sombra projetada.
Uma Verdadeira Opção ao Photoshop
Ninguém duvida que o Photoshop é uma aplicação extremamente robusta e completa. Todavia, está anos parado no tempo no quesito usabilidade e interface gráfica. Muitos filtros do Photoshop ainda não usam bem a GPU e não possui resposta em tempo real na maioria de seus filtros e efeitos. Já o Pixelmator, talvez por ser uma empresa jovem, ou por ser exclusivo para MacOSX pode, assim, usar em totalidade API da Maçã. O resultado é mais poder de processamento gráfico para gerar resultados impressionantes.
Sendo uma opção muito boa, o Pixelmator Pro é ideal para retoques de fotos, composições e criação de anúncios para mídias sociais, web, ícones e diversos assets para projetos gráficos. Porém pode ser extremamente bem usado também para material impresso.
Com o preço único de 59,90 dólares (aproximadamente 200 reais), o Pixelmator Pro, se seguir o método de sua versão anterior, vai receber ainda diversas atualizações e se tornará talvez a melhor opção para edição de fotos para usuários MacOSX.
E você? Já conhecia o Pixelmator? Já tem opinião sobre esse aplicativo? Deixe seu comentário.
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>
