Categoria: Desenvolvimento

  • 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.

  • BitMail – Projeto de Envio de Mailmarketing em Lote

    BitMail – Projeto de Envio de Mailmarketing em Lote


    Download

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

  • Emojis 🤔. O Que São Realmente? Qualquer um Pode Fazer?

    Emojis 🤔. O Que São Realmente? Qualquer um Pode Fazer?

    ➡ Emojis estão alta na comunicação social e hoje são peças-chave em diversas mídias, sendo aplicadas mais e mais como uma espécie de linguagem universal. Mas afinal, de onde vieram os emojis e qual a diferença deles em relação aos antigos emoticons?

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

    Do Bit à Organização

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

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

    Obs. Para quem não está acostumado com o termo hexadecimal, se trata de um sistema numérico com base em 16 digitos. Diferente do sistema decimal mais comum, que vai de 0 a 9, o sistema hexadecimal passa pelos digitos 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Através desse sistema, é possível criar uma variação maior e mais adequada de numerais, o que auxilia na definição de elementos, como neste caso, caracteres.

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

    Table ASCII
    Table ASCII

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

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

    O Consórcio Unicode

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

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

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

    Unicode Logo

    A Comunicação Social

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

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

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

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

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

    Emoticons do Live Messenger - smileys
    Emoticons do Live Messenger – smileys

    E, Finalmente, os Emojis

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

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

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

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

    😚🤩🤯🤬💩🦔🦉👩‍💻🧛‍♀️🧜‍♀️🧝‍♀️🙏

    A Aparência dos Emojis

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

    Exemplos de variação de emojis do mesmo tipo
    Exemplos de variação de emojis do mesmo tipo

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

    A Adobe na sua atualização de 2016, trouxe algumas novas famílias tipográficas baseadas em emojis.
    A Adobe na sua atualização de 2016, trouxe algumas novas famílias tipográficas baseadas em emojis.

    Concluindo

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

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

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

  • 🎃 Brincando de Assustar com CSS, HTML e um tiquinho de Javascript

    🎃 Brincando de Assustar com CSS, HTML e um tiquinho de Javascript

    Fotos misteriosas aparecem o tempo todo na internet. A grande maioria já foi provado ser uma farsa. Mas será que é possível criar alguma coisa para assustar nossos amiguinhos e, de quebra, ainda aprender um pouco sobre CSS?

    Mas é claro!

    Primeiro quero que entrem no site do Vale do Medo e vejam a história sobre essa foto (acima). Após olharem bem para a foto, por alguns segundos, volte aqui para o site para entender a pegadinha.

    Essa foto nada mais é do que duas imagens sobrepostas, sendo a de cima um PNG (onde está o homem sem rosto). Porém, a imagem que fica acima é restrita a qualquer ação com o mouse. Já se você tentar imprimir, o CSS vai cuidar para que o PNG não seja impresso. Além disso, tem uma pitada de Javascript (no exemplo, com jQuery), que vai cuidar para ativar o aparecimento e desaparecimento do homem sem rosto.

    Criando as imagens

    Originalmente foram baixas duas imagens da internet. Uma de um corredor qualquer e outra de um homem vestido todo de azul. As imagens usadas na postagem foram essas abaixo:

    Para poder dificultar encontrar a imagem no Google, invertemos a foto original e adicionamos um tom mais sombrio, azulado. Paralelo a isso, encontramos uma foto de um homem todo de azul, também no Google. E trabalhamos essa foto para ficar com um aspecto mais combinado com a foto original.

    É importante trabalhar com as duas imagens ao mesmo tempo, mas atento a deixá-las em camadas separadas. Trabalhar em sombras com transparências é fundamental para que a imagem fique mais realista.

    Exporte a imagem de fundo em .jpg e a imagem de frente em .png. Como a imagem PNG pode ficar um pouco pesada, dependendo do tamanho da imagem, acesse o site TinyPNG para reduzir ao máximo a imagem PNG.

    A imagem PNG vai ter na verdade vai ter as mesmas dimensões que a imagem em JPG, porém com uma área de transparência maior.

    Você terá então duas imagens, igual a como se faz em desenhos animados, onde o fundo é separado do objeto a ser animado.

    Código HTML

    Uma vez criado e separado as imagens, precisamos criar o código HTML. Para isso, devemos criar um container e dentro desta uma imagem, depois mais um outro container ou elemento similar. No nosso caso, usaremos uma div, um p e, claro, um img.

    <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.

  • O que é Design de Interação?

    O que é Design de Interação?

    Quando se fala em design, muitas pessoas compreendem como algo artístico ou estético, geralmente relacionado com o visual. Mas design vai muito mais além. Design é projeto. É entender o comportamento do usuário de acerca de um artefato e otimizar para que sua função seja executada da forma mais simples e objetiva possível.

    Na área de TI, temos uma vertente do design que é chamada de Design de Interação. Como o próprio nome diz, corresponde aos fatores de interatividade do usuário com o sistema. É função do designer de interação projetar como o usuário vai enviar, receber e responder (ou seja, interagir) o sistema ao qual está usando. Por conta disso, o designer de interação precisa possuir uma série de habilidades específicas que adentram a área de desenvolvimento como um todo, com conhecimentos que vão desde movimentos artísticos à performance de banco de dados. Abaixo vamos listar as algumas das competências agregadas a um designer de interação.

    Estética

    Sem dúvida a parte do design que as pessoas mais lembram é a estética e por isso estamos falando dela primeiro. A estética depende do conhecimento relacionado a arte e filosofia. Estética não significa beleza, mas sim ajustar a aparência de acordo com a proposta do projeto. Muitas vezes, a estética é uma consequência de algo bem desenvolvido e é a última parte em que o designer trabalha.

    Um termo muito usado na área de TI para se referir a estética de um sistema ou aplicativo é Look & Feel (Aparência e Sensação). Esse termo define a sensação que o usuário tem acerca de todo padrão estético de uma interface gráfica. Essa ideia é clara a medida em que as pessoas tendem a sentir sensações distintas ao utilizar aplicativos e, principalmente, sistemas operacionais diferentes. A sensação de usar o Windows, o MacOSX ou uma GUI (Graphic User Interface – Interface Gráfica de Usuário) para Linux / Unix, mesmo que usando o mesmo aplicativo, é diferente e até um pouco difícil de explicar tal diferença.

    Legibilidade

    A legibilidade é um conceito que envolve a compreensão simples dos elementos da tela. Lembre-se que, dentro da visão de comunicação, texto não são somente palavras escritas, mas sim qualquer símbolo que possua um significado, como um ícone, uma imagem ou um som. A legibilidade é o que torna o texto compreensível em seu contexto. Trocando em miúdos, trata-se de como os elementos podem ser facilmente interpretados pelo usuário.

    A legibilidade vai desde as escolhas dos termos e palavras escolhidas à iconografia e tipografia. Até mesmo qual fonte será usada e sua espessura, se os ícones forem esqueumórficos ou minimalistas, se os espaçamentos vão ser maiores ou menores, tudo isso está envolvido no conceito de legibilidade.

    É neste ponto do projeto que também se pensa em contrastes. Compreende-se contraste não apenas a diferença do preto no branco, mas em todas as reduções de nuances que facilitam a legibilidade. Quanto menos etapas de algo, mais contraste ela tem. Grande/Pequeno, Claro/Escuro, Cores Opostas, etc.

    Usabilidade

    Uma das principais preocupações do designer de interação é o quão fácil pode ser para o usuário chegar ao seu objetivo. A usabilidade está vinculada a legibilidade, mas vai além. Para isso, o designer precisa definir elementos que direcionem a atenção do usuário e que facilite a localização instintiva dos items interativos. É pensando na usabilidade que o profissional irá diagramar a tela e preparar protótipos de comportamento.

    Dentro da usabilidade, o Designer de Interação deve fazer pelo menos um desses materiais:

    • Wireframe: Trata-se de um rascunho que define as funcionalidades do sistema. Pode ser um desenho à mão ou feito no computador, mas não possui compromisso com a fidelidade do projeto final. Sua importância é definir conceitos básicos enquanto está sendo desenvolvido o design final da interface.
    • Mockup: Imagens estáticas que representam as interfaces com a aparência mais próxima possível da final. O objetivo é demonstrar para equipe ou para o investidor como o projeto deverá ficar no final. O mockup também serve como base para criação do código referente a GUI do sistema.
    • Protótipo: Similar ao Mockup, porém simulando as interações, com ações de cliques e movimentos. Contudo, os dados geralmente são fictícios e funciona em ambiente controlado. Seu objetivo é permitir um melhor planejamento da interação, como também mostrar exemplos a investidores ou usuários teste.

    É fazendo testes de usabilidade que o designer de interação vai determinar diversos fatores de espaçamentos, tamanhos de ícones e acessibilidade. Ainda, é neste momento que deve-se sair da zona de conforto e experimentar o leiaute em diferentes contextos.

    Funcionalidade e Programação

    Design é dar uma função à forma. Uma forma sem função, sem motivo de existir, não é design, mas arte. Diferente da arte, o design necessita de um função à quem este serve. Tudo o que se decide em um projeto, desde a sua elaboração estética até sua agilidade, existe para retornar um resultado, que é o objetivo da existência de um determinado sistema ou aplicativo.

    Por isso, o designer de interação não deve apenas conhecer da parte gráfica e estética, mas também das idiossincrasias referente a área na qual está trabalhando. Neste caso, tecnologia e desenvolvimento.

    Assim como um designer de moda precisa entender de costura e um designer de interiores de arquitetura, um designer de interação precisa saber como programar, ao menos o front-end, e como implementar o design que ele próprio elabora. Mesmo que ele não seja o responsável direto por aplicar esse código, é necessário que possua um conhecimento profundo de front-end e razoável quanto a back-end e banco de dados. Inclusive, muitas vezes, a responsabilidade de criação de novos componentes de interatividade é justamente do designer de interação.

    Isso é necessário pois a Experiência do Usuário (UX- User eXperience), item chave do trabalho de um designer de interação, depende de todos os fatores tecnológicos que acompanham o desenvolvimento de um projeto (e até mesmo antes do usuário ter acesso ao sistema). Em determinado ponto, o designer precisa testar a confiabilidade dos dados, o tempo de resposta, praticidade de atualização, necessidade de fragmentação e, inclusive, o tempo de reparo de um eventual problema e a saúde do código. O relacionamento com o programador as vezes é esquecido, mas a experiência do programador e dos outros profissionais da empresa são tão importantes quanto a experiência do usuário, pois isso se refletirá em todo desempenho e qualidade do projeto.

    Afim de compreender, conversar, sugerir e implementar, o designer de interação precisa ter conhecimentos específicos de diferentes linguagens de programação e marcação, além de suas tecnologias agregadas, tendo foco principalmente (mas não apenas) no front-end, como:

    • HTML;
    • CSS;
    • Javascript;
    • Lógica de programação;
    • Documentos DOM específicos de algumas plataformas;
    • Kits de plataformas (como Android Kit, iOS e UWP);
    • Linguagens Back-End como PHP, Java, Python, ASP ou outras que forem sendo necessárias aprender em seu cotidiano.

    Ambiente Controlado vs Produção

    Se por um lado o designer de interação deve possuir conhecimentos acerca do comportamento e da área de tecnologia, por outro, grande parte daqueles que se afirmam profissionais não estão trabalhando pensando em ambiente de produção.

    Não é incomum ver os chamados “Designers de Dribble“, ou “Designers de Ambiente Controlado“. Basicamente, quando alguém busca no Google por UI Design vai encontrar centenas de interfaces impressionantes e incríveis, com cores vibrantes e lindas que nem a Apple conseguiria fazer tão perfeito. A verdade é que esses designs funcionam apenas em ambiente controlado, que não representam a usabilidade real e ainda frustram aqueles que estão começando.

    Na próxima vez que buscar por inspiração (se for o seu caso), comece a refletir quando achar algo no Google, coisas como: E se o nome da cidade for maior do que o desse exemplo? E se o número nessa área superar o esperado? Será que o usuário vai compreender esse nome truncado? Qual o tempo hábil para fazer determinado efeito e se vale a pena? Qual o funcionamento em telas menores? Além disso, uma das coisas mais complexas do design de interfaces é criar padrões para formulários que sejam funcionais independente do tamanho de seus dados ou localização. O que é ainda mais complicado em sistemas densos como ERPs e outros específicos.

    Pensando nessas respostas é que empresas que desenvolvem sistemas operacionais possuem suas próprias guidelines, que descrevem o comportamento de usabilidade em ambientes reais e traz fortes sugestões de padronização.

    Claro que um profissional não precisa seguir à risca esses padrões, porém eles são fundamentais para a base do desenvolvimento de interfaces mobile e desktop pois não é bom que fujam demais do padrão do Sistema Operacional e o usuário sinta-se perdido. Entretanto sites e sistemas web possuem maior flexibilidade, ficando a cargo do Designer de Interação desenvolver o próprio Guidelines para os serviços e produtos relacionados com esse sistema.

    Concluindo, Design é Projeto

    Design não é desenho. Design não é ilustração. Design não é leiaute. Design é projeto. Então, diferente do que muitos pensam, alguns inclusive que se intitulam design, a área não é arte pela arte. O design serve à função e, como tal, o profissional que projeta algo precisa possuir conhecimento em diversas áreas relacionadas àquela específica vertente na qual está trabalhando. Logo, o designer de interação, além dos conhecimentos empíricos do design, como tipografia, colorimetria, filosofia, matemática (geometria), antropologia e comportamento, também precisa possuir a habilidades específicas em programação front-end e back-end (full-stack), história e negócios da área de Tecnologia da Informação.

    Se você gostou deste post, curta e compartilhe ele nas mídias sociais. Caso não tenha gostado, tenha alguma dúvida ou queira fazer uma observação, deixe um comentário.

  • IBM Watson – Como Criar um Chatbot (com PHP e jQuery)

    IBM Watson – Como Criar um Chatbot (com PHP e jQuery)

    Inteligência artificial é um tema que está em discussão constante no novo milênio. O uso de chatbots tem sido cada vez mais utilizado em diversos ambientes, seja para atendimento, monitoramento, suporte ou outras aplicações diversas. Designers de Interação e Programadores tem usado cada vez mais essas tecnologias para poder criar uma experiência melhor e mais dinâmica para o usuário.

    Dentro da área da computação cognitiva, uma das empresas que está em muita evidência no mercado é a IBM, com sua tecnologia Watson.

    A tecnologia Watson é uma amálgama de serviços de inteligência artificial que permite ao desenvolvedor criar plataformas de comunicação automatas com seus usuários. Para isso, a IBM disponibiliza diversas APIs de comunicação com determinados serviços. Para nosso exemplo de chatbot usaremos o serviço de Conversação do Watson.

    Criar um chatbot com o Watson é bem mais simples do que parece. Porém, devemos deixar claro que a proposta deste tutorial é ser básico, ser um ambiente de entrada, simplificado porém funcional para o desenvolvedor ou designer interessado nesse tipo de tecnologia.

    Atenção, você precisa de um servidor que possa ser autenticado na internet. Ou seja, não adianta testar de Xampp ou Wampp, você precisa testar ao menos de uma hospedagem compartilhada.

    Preparando o Ambiente

    Primeiramente você vai precisar de uma conta na Bluemix. A Bluemix é uma plataforma em nuvem de projetos da Big Blue (apelido dado a IBM pelo mercado). Para isso, basta entrar no site da empresa e clicar em Teste Gratuito 30 Dias.

    Depois disso, siga as instruções para você preencher os seus dados básicos.

    Após o preenchimento de seus dados, será pedido para você criar uma organização. Por algum motivo, você não verá a opção de América do Sul referente ao local, todavia você pode continuar selecionando SUL DOS EUA que não vai impedir o funcionamento do chatbot. Simplesmente siga as demais opções até chegar ao final.

    Cadastro no Bluemix

    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.

    Criar serviço de conversação Watson

    Configuração 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.

    Preço Conversação Watson

    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).

    Criar espaço de trabalho

    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.

    Pegar Código do Workspace no Watson

    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:



    Download
    Implementar um chatbot do IBM Watson é mais simples do que você pensava, não é? Mas lembre-se que esse é só um tutorial básico para demonstrar como usar a API REST. Você pode, verificar todos os métodos e parâmetros que podem ser utilizados diretamente pela documentação.

    Caso tenha apreciado este conteúdo, dê uma passada lá na página da VelhoBit no Facebook e deixe seu like. Compartilhe este post com colegas e interessados na área de tecnologia e não deixe de conferir o restante dos artigos no blog.

    Até o próximo tutorial.

  • Terceirização Ilícita no Mercado de TI – Uma Abordagem Ética

    Terceirização Ilícita no Mercado de TI – Uma Abordagem Ética

    Antes de mais nada, é importante deixar claro que deve ser considerado não o trecho de um código, como um CMS de código aberto ou algo assim, mas sim o resultado do produto. Por exemplo, um site não é o WordPress, o site é o resultado do conjunto. Da mesma forma, um aplicativo não é uma biblioteca e sim um conjunto de elementos para solucionar um problema.

    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.

  • Sistemas Operacionais (parte 1 – história)

    Sistemas Operacionais (parte 1 – história)

    Quanto vale uma pedra de ouro se não houver uma utilidade para ela? Computadores são apenas pedaços de silício e plástico quando não possuem software para faze-los funcionar. Nos dias de hoje, o principal software para um computador é o Sistema Operacional. É chamado de Sistema Operacional o software, base, que faz o gerenciamento de recursos do hardware e define o modo como este se comunicará com as tarefas e processo de outros softwares.

    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.

    IBM 704

    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.

    Univac 9400
    Univac 9400-1969

    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.

    Terminal de Mainframe Rodando Unix

    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.

    MS-DOS

    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.

    Apple Lisa

    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.

    Linus Torvalds

    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