Autor: Rodrigo Portillo

  • Clearsale Start – Plugin Woocommerce Gratuito

    Clearsale Start – Plugin Woocommerce Gratuito

    Faça o Download pelo Github:

    Download

    Atenção: Este plugin não tem nenhuma relação comercial com a Clearsale. Foi criado unicamente para auxiliar pessoas que desejam facilitar a integração com sua loja no Woocommerce.

    Sobre

    Este plugin foi criado para facilitar a integração entre o Clearsale Start com o Woocommerce. A Clearsale é um famoso serviço que oferece soluções anti-fraude para e-commerces.

    Como desenvolvedor, meu objetivo foi criar uma solução de fácil instalação para usuários do Woocommerce e oferecer de forma gratuita e colaborativa para quem quiser ajudar na atualização.

    Estamos aguardando a aprovação do WordPress para adição no diretório.

    Requerimentos

    Como Funciona

    O plugin segue as informações disponíveis no manual de integração do Clearsale Start

    Ao contratar o Clearsale Start você deverá receber um e-mail como este, com os tokens de homologação e produção:

    Nas configurações do plugin, preencha os tokens de Homologação e Produção que foram enviados por e-mail pela Clearsale. Por padrão,o checkbox de homologação está marcado. Lembre-se que em modo de homologação os valores de retorno são fictícios.

    Configurações do Plugin

    Na página do pedido, você verá um botão roxo com a opção de escolher a forma de pagamento e colar a máscara do Cartão de Crédito (se for o caso). O plugin irá tentar reconhecer automaticamente, mas dependendo das formas de pagamento que estão instaladas em sua loja, pode ser que ele não detecte automaticamente. Otimizações poderão ser feitas em versões futuras.

    Após finalizar a homologação, desative o checkbox de homologação nas configurações. Durante a homologação, um alerta laranja indicará que você está utilizando em modo de homologação.

    Funcionou para você? Pense em fazer uma doação para mantermos atualizado

    FAQ

    Por que é um botão e não automático?

    A Clearsale cobra por pedido processado. Segundo a documentação ela não vai reprocessar o pedido se ele já o identificar lá, então o botão pode ser pressionado para um pedido já analisado que não será cobrado extra.

    Todavia, nem todo pedido você precisa fazer uma análise. Se você identifica um cliente recorrente, ou foi um pagamento pelo pagseguro ou foi um pagamento por transferência, não há necessidade de você gastar com essa análise, por isso o botão.

    Mais informações

    O plugin tenta detectar algumas informações através da leitura das atualizações do perfil. Para isso, ele irá tentar verificar o título da forma de pagamento e as notas do pedido. Ele pode não conseguir detectar a forma de pagamento dependendo do tipo de checkout/webservice que você está usando em seu site.

    Devido ao Woocommerce não separar número do endereço, o número da residência não está sendo passado para a Clearsale de forma individual, mas sim junto ao logradouro.

    Se você não usa o WooCommerce Extra Checkout Fields Plugin, altere o arquivo html-meta-box.php para mudar a fonte de dados.

  • Adobe Muse é Oficialmente Descontinuado

    Adobe Muse é Oficialmente Descontinuado

    Nesta dia 26 foi anunciado através de e-mail e da página oficial do Muse, o encerramento de desenvolvimento de novas funcionalidades para o Muse. A ferramenta ainda terá suporte técnico por mais um ano.

    Em sua justificativa, basicamente a Adobe reconhece que o Muse não é uma solução eficaz para nenhum dos casos ao que ele foi proposto no começo e que o público profissional não usa ou não deve utilizar a ferramenta. Ainda recomenda alternativas para caso o usuário tenha um site publicado através deste.

    Apesar das boas intenções, o Adobe Muse tentou atingir um nicho que não é próprio da Adobe.

    Um anúncio menos importante aconteceu também neste dia 26 de Maço. O Business Catalyst também será encerrado com o prazo do dia 26 de Março de 2020. O anúncio é menos impactante pois o Business Catalyst sempre foi pouco conhecido pelo público geral da Adobe.

    O Adobe Muse foi uma ferramenta desenvolvida pela Adobe para fazer sites automaticamente. À medida que o Dreamweaver se fortalecia como uma ferramenta forte de desenvolvimento, para o lado mais automatizado a Adobe seguiu para a linha Edge. O Muse veio junto com a estreia de ferramentas como Adobe Edge Flow, Edge Code (posteriormente se tornando o Brackets), dentre outras.

    O Adobe Muse gera códigos pouco semânticos e pouco reutilizável para gerar sites. Por profissionais, os que ainda o usava eram para desenvolver protótipos, o que foi completamente abandonado pelo Adobe XD. Entretanto, há uma comunidade forte de usuários do Muse no Brasil, que usam a ferramenta como uma espécie de WIX para vender sites para pequenas empresas, apoiando um mercado cinza de vendas de serviços por leigos.

    Devido a algumas dúvidas, aqui vai a versão traduzida do anúncio da Adobe:


    Anúncio sobre o Produto Adobe Muse

    Como a Adobe continua a refocar no desenvolvimento de produtos e soluções que ofereçam a nossos clientes o que há de melhor, nós estamos agora anunciando o fim do desenvolvimento de novas funcionalidades para o Adobe Muse CC.

    Prazo

    Em 26 de Março de 2018 nós iremos lançar o último lançamento com melhorias do Adobe Muse. Nós iremos continuar a oferecer suporte técnico para todas as contas ativas dos clientes do Creative Cloud até 20 de Maio de 2019. Por favor, veja a seção de FAQ e Respostas para mais detalhes.

    Cobertura

    Adobe vem disponibilizando softwares e serviços excepcionais para nossos clientes. Isso está em nossa natureza de inovar e tentar coisas novas, e esse foi o espírito quando começamos a desenvolver o Muse oito anos atrás. Enquanto nós vinhamos comprometidos com a visão do Muse, nós percebemos tendências na criação de websites que nos fizeram evoluir nossa estratégia:

    • Designers que são ativamente engajados em criar websites e aplicações complexas estão investindo em UX design e conhecimentos em prototipagem enquanto com parcerias com times de desenvolvimento trazem seus designs à vida.
    • Para websites mais simples, notamos os surgimento de criadores Faça-Você-Mesmo (FVM) que utilizam modelos personalizáveis que podem rapidamente criar sites responsivos que podem ser modificados por um designer ou um usuário.

    Nós agradecemos nossos usuários e queremos ajudá-los a fazer uma transição suave para outras ofertas da Adobe que possam atender suas específicas necessidades:

    • Se você está construindo websites e aplicações complexas, você pode usar o Adobe XD. Apesar do Adobe XD não gerar código pronto para a web como o Adobe Muse fazia, o XD é uma solução all-in-one que permite o usuário a projetar, prototipar e colaborar com interessados e desenvolvedores para trazer vida a seus websites.
    • Se você está construindo um website para demonstrar seu trabalho criativo, você pode usar o Adobe Portfolio para criar belos websites de portfolio que você pode conectar com a plataforma Behance.
    • Se você está construindo um website de uma página, como um cronologia de fotografias, newsletters ou landing pages, você pode usar o Adobe Spark Page para criar belas páginas da web responsivas com seu estilo único.

    FAQ e Respostas

    Isso afeta todos os usuários do Muse?

    Sim

    Qual é o prazo?

    O time do Muse irá parar de desenvolver novidades a partir de 26 de Março de 2018. Nós iremos continuar oferecendo suporte técnico para todos os usuários ativos do Creative Cloud até 20 de Maio de 2019.

    Eu entendi que não vai haver mais desenvolvimento do Muse, mas o programa irá parar de funcionar em 20 de Maio de 2018 quando o suporte acabar?

    Não, a aplicação Muse irá continuar a abrir no seu computador. Você conseguirá continuar editando o que já existe ou criar novos websites com a aplicação, todavia é bem possível que os padrões da web e navegadores continuem mudando depois que a Adobe parar de dar suporte a aplicação. Depois de 20 de Maio de 2019, a Adobe não mais irá entregar atualizações de compatibilidade com MacOS e Windows ou corrigir qualquer bug que possa ocorrer quando for publicar os sites Muse na web.

    Que tipo de ajuda e material de suporte poderei esperar no futuro?

    O Adobe Muse Microsite continuará disponível para usuários até que o suporte termine em 20 de Maio de 2019. Todavia não haverá inclusões de novos materiais e nem de eventos, tutoriais ou sites do dia. O Muse Widget Directory continuará atualizado com a disponibilidade atual do widget durante esse prazo.

    O que vai ocorrer com meu website  construído em Muse? Ele irá desaparecer?

    Websites construídos com Adobe Muse continuarão a funcionar na internet no caso de estar em qualquer outra hospedagem third-party, como uma GoDaddy ou Bluehost (por exemplo). Sites hospedados no Business Catalyst deverão ser republicados para outras hospedagens para manter-se funcionando depois de 26 de Março de 2020 quando a hospedagem do Business Catalyst não estará mais disponível.

    Eu tenho licenças/downloads de widgets Muse de um dos seus parceiros widgets. Meus widgets continuarão funcionando depois que a Adobe suspender o suporte do Muse?

    Isso depende individualmente de cada provedor do widget. Se você estiver fazendo um pagamento anual para um plano de inscrição com eles, você deverá ficar alerta para verificar os planos de suporte oficial para o futuro.

    Os widgets que eu comprei de um de seus parceiros irão funcionar com o Bhance Porfolio ou com o Adobe Drewamweaver?

    Infelizmente, não. Todos os widgets que foram desenvolvidos para funcionar com o Adobe Muse são apenas compatíveis com o Adobe Muse.

     

  • Netflix Anuncia Família Tipográfica Própria – Netflix Sans

    Netflix Anuncia Família Tipográfica Própria – Netflix Sans

    A Netflix anunciou nesta quinta-feira (dia 22) uma nova família tipográfica própria para usar em sua identidade visual.

    Perguntado pelo motivo da criação, o designer de marcas Noah Nathan, responsável pelo desenvolvimento da tipografia personalizada, afirma que é uma questão de economia no marketing, além de ampliar o conceito da identidade da empresa.

    Com a natureza global dos negócios da Netflix, licenciamento de fontes podem ser muito caras

    – afirma Nathan ao blog Its Nice That. E prossegue:

    Desenvolver esta tipografia não é apenas criar uma ‘bem’ e um elemento único para estética da marca… Mas economizar milhões de dólares para a companhia todo ano aplicando futuramente suas tipografias de licença própria em muitos espaços digitais de publicidade.

    Ainda segundo o Its Nice That, a tipografia foi pensada em estética e funcionalidade, com proporções que seu próprio criador chama de “cinemático” para as maiúsculas e “compacto e eficiente” para as minúsculas. Noah descreve as formas como limpas e neutras, sem excessos ou distrações.

    Netflix Sans chega em diferentes pesos (espessuras): regular, light, thin, medium, bold and black.

    A criação de tipografias próprias para economias em distribuição na área de tecnologia não é uma coisa nova. A família Arial é uma “cópia assumida” da família Helvetica, que foi encomendada pela IBM e, posteriormente, Microsoft, para não precisarem pagar os royalities do uso também do Helvetica e suas variações(como a Apple fez por anos). Até hoje a empresa do Windows utiliza tipografia própria. Mais recentemente, a Apple também oficializou a família San Francisco e a Samsung o SamsungOne.

    Com notícias do CNBC, Its Nice That e do site Noah Nathan

  • Versão Developer Preview do Android P

    Versão Developer Preview do Android P

    Durante o último final de semana, a Google liberou a primeira versão do Android P (ainda sem nome oficial). O objetivo é facilitar, como sempre, para que desenvolvedores possam adaptar suas aplicações e mante-las funcionais. A surpresa, entretanto, está no fato de que o sistema operacional agora conta com suporte a notch (aquele dentinho do iPhone X), o que criou uma polêmica muito grande entre os hobbystas e desenvolvedores.

    O lançamento foi focado para quem usa o Google Pixel e Google Pixel 2.

    Atualização de Interface Gráfica

    Além da polêmica do notch, o novo Android traz o que está sendo chamado pelos desenvolvedores de Material Design 2.0. No ano passado, o site do MaterialDesign foi todo remodelado, abandonando parte do conceito de “uso de folhas sobrepostas” sugerido originalmente. Em especial, podemos reparar na diminuição relevante dos tons de sombra.

    Também podemos verificar que os cantos arredondados foram intensificados e não existe praticamente mais nenhum objeto com borda reta. Além disso, os ícones agora estão sempre fechados em um ambiente circular, o que melhora consideravelmente a organização de grade e espaçamentos, tal como definir melhor a área de toque do objeto. Também é possível notar o uso maior de contrastes de cores.

    Mais opções do long press (aquele evento que emula o 3d Touch da Apple), também foram adicionadas. Agora é possível pressionar por mais tempo em cima de uma notificação para ver mais opções sobre ela.

    As animações também sofreram uma atualização relevante, anulando aquelas transições de sombra que partiam da área de toque, criado pela referência original do Material Design. As transições também estão nitidamente mais rápidas e mais focadas no ease-out.

    O novo laucher trouxe uma novidade que pode incomodar muitas pessoas. A busca do Google agora encontra-se completo, na parte inferior do dock fixo de aplicativos, incorporando ainda mais o widget ao sistema operacional.

    Os controles e notificações de mídia e armazenamento, no geral, apresentam-se agora em formatos de cards e não apenas como uma instrução em tela.

    As informações de bateria também estão mais sutis. O modo econômico não mais é simbolizado pelo ícone alaranjado, mas sim por um símbolo de +.

    Funcionalidades Adicionadas

    Tal como o iOS11, o Android P agora traz a opção de edição imediata de screenshots. Até então a funcionalidade é limitada, mas deve ganhar mais opções até o lançamento oficial do sistema. A opção de tirar um screenshot ainda foi incluído nativamente nas opções de desligar / reiniciar.

    Outra opção já conhecida por usuários do iOS chega no Android P, o zoom ao navegar texto. Agora ao colocar o cursor de texto em um ponto específico, o usuário terá uma ampliação da região.

    Dentre outras atualizações, temos a lista resumida das seguintes funcionalidades (inclusive as já citadas):

    • Interface Gráfica
      • Nova Interface Gráfica de Configurações
      • Novos estilos de para notificações de mensagens
      • Novas transições e animações
      • Atualização do Pixel launcher e modificações no dock
      • Mudança no ícone de alerta da bateria
      • Always on display agora mostra informações da bateria e o centro de notificações
      • Novo Easter Egg
    • Funcionalidades
      • Editor nativo de screenshots
      • Screenshot pelo botão de força
      • Cursor de texto com Zoom (como no iOS)
      • Agendamento de economia de energia
      • Modo Não Pertube simplificado
      • Os botões de volume agora controlam o voluma da mídia por padrão
      • Brilho adaptativo mais inteligente
      • Travamento de rotação no modo paisagem
      • Suporte a Multi-Bluetooth
      • Controle de intensidade da vibração
      • Acesso para desabilitar as animações

    Com informações do Gizmodo, Blog do Google e Fórum XDA Developers

  • Android Lança Novo Android Oreo GO

    Android Lança Novo Android Oreo GO

    Comemorando os 10 anos do lançamento do primeiro smartphone Android, a Google traz ao mercado o Android Oreo GO Edition. O objetivo dessa versão é trazer acessibilidade para smartphones low-end. A versão GO é feito para rodar em smartphones entre 512MB e 1GB de RAM, menos processamento e menor capacidade de expansão.

    O dispositivo seguirá a tendência dos apps da linha GO, lançados pela Google com o objetivo de serem mais leves e consumir menos banda. Os aplicativos incluem o Google Go, Google Assistant Go, YouTube Go, Google Maps Go, Gmail Go, Gboard, Google Play, Chrome, e o novo Files Go app by Google.

    O primeiro smartphone a ser anunciado com Android Go foi o Alcatel 1X, com uma tela de 5,3 polegadas (480p), processador quad-core da MediaTek, 1GB de RAM, 16GB ded armazenamento e carregador microUSB. Não possui sensor de digital, mas há um motor de reconhecimento facial. O preço será na casa dos 100 euros e deverá ser lançado em Abril.

    Com notícias do Blog do Google e 9to5Google

  • Dicas para Otimizar o Console Javascript do Navegador

    Dicas para Otimizar o Console Javascript do Navegador

    Designers e desenvolvedores constantemente precisam debugar seus sistemas para encontrar erros ou relatar informações para outros desenvolvedores da equipe. Para otimizar o trabalho do profissional web, o Console do navegador de sua preferência permite adicionar diversas opções e comandos.

    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.

    String            Descrição
    %o or %O Exibe o objeto e permite você visualizar o objeto ao clicar nele.
    %d or %i Exibe um inteiro.
    %s Apenas uma string.
    %f Exibe um ponto flutuante

    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.

  • Corel Lança VideoStudio Ultimate 2018

    Corel Lança VideoStudio Ultimate 2018

    No último dia 13, a Corel lançou a VideoStudio® Ultimate 2018, sua nova versão de seu principal editor de vídeo.

    Como opções próprias para stop motion, edição multi-câmera, suporte 4K e vídeos 360, o editor da Corel possui uma interface simplificada muito similar ao do Sony Vegas. Dentre as novas opções, agora é possível criar templates próprios, corrigir distorções óticas, criar textos em 3D e controlar zoom e movimento. Mas talvez o detalhe mais claramente visível seja a nova interface gráfica do software, que agora apresenta uma opção com uma cor azul escura.

    VideoStudio Ultimate 2018 User Interface

    As ferramentas agora estão muito mais acessíveis e rápidas e o novo organizador de linhas do tempo cria uma interface muito mais orgânica para edição, lembrando até um pouco o iMovie.

    Infelizmente o VideoStudio não está disponível em português e o preço sugerido é de R$199,00.

    Ferramenta de criação de texto em 3D

    Otimização da Ferramenta de Stop Motion

    Atualização para Renderização de Vídeos 360

    Nova Opção de Edição de Tela Divida e Criação de Templates

    Você pode saber mais sobre a aplicação no site https://www.videostudiopro.com/en/products/videostudio/ultimate/

  • Google Remove Opção Ver Imagem do Google Images

    Google Remove Opção Ver Imagem do Google Images

    Supostamente devido a pressão das empresas de stock photos, o Google removeu a opção de visualizar a imagem no Images. A atualização ocorreu pouco tempo depois do Google fechar um acordo com o GettyImages para reduzir o uso de imagens pirateadas. Além disso, o alerta sobre direitos autorais ainda está mais visível.

    Essa empecilho não impede no entanto de abrir a imagem em uma nova guia a partir da URL.

    O Google oficialmente afirma que essa opção dá acesso a conteúdo relevante para o usuário.