Tag: desenvolvimento

  • PHP no Windows 10 – Esqueça o Xampp e Instale o Apache no Subsistema Linux

    PHP no Windows 10 – Esqueça o Xampp e Instale o Apache no Subsistema Linux

    Uma das melhores coisas do Windows 10 é a possibilidade de instalar um subsistema Linux nele. Com isso, você pode montar o seu servidor Apache direto nesse subsistema, deixando o ambiente local muito mais similar a onde você vai efetivamente publicar, e com muito mais performance e liberdade do que os AMPs disponíveis para o Windows (Xamp, Wamp, Mamp).

    Habilitando e Instalando o Subsistema

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

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

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

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

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

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

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

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

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

    Instalando o PHP e MySQL em seu Ubuntu Linux

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

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

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

    Instalando o Apache 2

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

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

    Windows TerminalProtocol not available: AH00076: Failed to enable APR_TCP_DEFER_ACCEPT

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

    AcceptFilter https none
    AcceptFilter http none

    Instalando o PHP

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

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

    Instalando o MySQL

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

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

    Garantindo todos os privilégios para usuário administrador

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

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

    Digite \q para sair do cliente.

    PHPMyAdmin

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

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

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

    Testando

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

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

    Habilitando as configurações do Apache

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

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

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

    Informações Importantes

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

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

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

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

    Extra: Criando um SSL autoassinado

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

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

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

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

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

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

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

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

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

    Agora vamos editar a configuração do SSL.

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

    ServerAdmin webmaster@localhost.com
    ServerName localhost
    
    SSLCertificateFile /etc/ssl/certs/apache-selfsigned.crt
    SSLCertificateKeyFile /etc/ssl/private/apache-selfsigned.key

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

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

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

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

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

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

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

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

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

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

  • Wireframe, Mockup ou Protótipo?

    Wireframe, Mockup ou Protótipo?

    Quando iniciamos um aplicativo, site, sistema, ou diversos outros ambientes de interação, o primeiro passo é criar diferentes tipos de propostas de como vai ser a aplicação e de como vai ser seu comportamento. Se você é desenvolvedor, independente de ser designer ou programador, ou ainda está estudando, você já deve ter tido a necessidade de criar, ao menos, um rascunho de como será a interface gráfica de sua aplicação. E, se você pretende trabalhar especificamente com interfaces gráficas ou UX, a definição desses termos é ainda mais importante, sendo fundamental para uma boa comunicação e escolha de ferramentas adequadas.

    Importância

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

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

    Esboços ou Sketchs

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

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

    fonte: geekchix.org

    Wireframes

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

    Foto: Todd Moy

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

    Biblioteca de Wireframes no Adobe Illustrator. Foto: Toptal.
    Exemplos Wireframes

    Mockups

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

    Fonte: https://portillo.myportfolio.com

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

    Human Interface Guidelines

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

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

    Fonte: https://portillo.myportfolio.com
    Fonte: https://portillo.myportfolio.com
    Fonte: https://portillo.myportfolio.com
    Fonte: https://portillo.myportfolio.com

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

    Foto: Microsoft Fluent Design

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

    Fonte: Apple

    UI Kits

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

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

    UI Kit do Android / Material Design para o Adobe XD. Fonte: Adobe.

    Protótipo

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

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

    Exemplo de prototipagem no Adobe XD. Fonte: divulgação.

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

    Exemplo de prototipagem no InVision. Fonte: divulgação.

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

    Concluindo

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

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

  • Exemplo de App Ionic – Hackathon

    Exemplo de App Ionic – Hackathon

    Disclaimer: O objetivo deste post é tão simplesmente compartilhar o projeto que possa ser útil para alguém que está precisando ou quer aprender um pouco de Ionic. É um projeto feito em poucas horas, durante um hackathon, então não espere pelas melhores práticas. Para dúvidas mais complexas, entre em nosso grupo de Design e Programação, no Facebook.


    Veja o projeto no Github:

    Star

    No último final de semana (29 e 30 de Setembro de 2018), participei do Hackathon do Shopping Center Recife. Devido a um erro da desorganização, acabei ficando em um grupo que não haviam outras pessoas que tivessem ao menos noção de programação (enquanto havia grupo composto inteiro por pessoas que sabiam programar), de forma que acabei programando sozinho durante cerca de 20 horas. Por outro lado, o restante do meu time conseguiu me auxiliar fazendo a apresentação e com uma ideia que poderá ser muito valiosa para o projeto de algumas pessoas, que irei explicar abaixo.

    Equipe, da esquerda para a direita: Eu, Marcos Lemos, Pedro Affonso, Suellen Sales e Helton Portela

    O projeto

    Diferente do que foi referido pelo edital do Shopping, que afirmava buscar uma solução de “relacionamento com o cliente”, o objetivo principal era encontrar uma forma de conseguir dados mais assertivos sem a necessidade direta de contatos com o lojista. Esses dados seriam analisados e entregues de forma a ajudar o Shopping a criar novas campanhas. Tudo sem diminuir faturamento.

    Para isso, eu pensei que poderia desenvolver uma versão do aplicativo do Shopping, que já existe, e melhorar, otimizar, deixa-lo mais fluido e com mais opções. Inicialmente, pensei em integrar o Google Indoors, mas GPS não funciona corretamente no Shopping e o Indoors não está disponível por um tempo limitado. Algumas equipes até sugeriram algo parecido, na entrega, mas apenas sugestão, pois seria inviável descobrir a localização atual em ambiente tão contido apenas por triangulação. Enfim, pensei em envolver compartilhamento em mídia social também, para engajamento, etc.

    No final, o projeto consistiu em uma nova versão do aplicativo, com um chatbot amigável, um clube de vantagens que armazena informações da nota fiscal (pelo QRCode) e a proposta de manipulação desses dados no backoffice, além de campanhas direcionadas pelo mesmo. Alguns dos outros grupos usaram propostas bem similares.

    No fim, eu decidi que o principal seria apresentar os dados em um backoffice. Minha ideia inicial era realmente preparar um BI, ou o começo do que poderia ser um, usando os dados do aplicativo reformulado. Porém, os outros integrantes de minha equipe tiveram a ideia de criar um clube de vantagens que pegasse o código do QRCode do cliente, pegando assim dados bem mais específicos sem a necessidade de acordos com o lojista, em trocas de pontos que poderiam ser trocados por serviços do shopping ou de parceiros mais próximos (como o cinema), que admito ser melhor que a minha ideia original.

    Se por um lado, eu decidi fazer algo que pudesse se tornar um BI (Business Intelligence), por outro, o tempo não foi favorável. Sendo o único desenvolvedor, eu fui obrigado a dividir meu tempo entre aplicativo, backoffice e banco. Logo, não esperem um código tão bem escrito. Lembre-se que é um projeto desenvolvido do zero em algumas poucas horas.

    Tecnologias

    Para agilizar o desenvolvimento e ainda poder ser algo demonstrável em tempo real direto no navegador (para exibir no telão), o projeto do app foi feito em Ionic 3, famoso framework Cordova para desenvolvimento de aplicações em vários dispositivos. Graças a isso, ainda conseguia testar em tempo real no Android e no iOS. Fiz o possível para implementar o máximo de funcionalidades possíveis.

    Para o backoffice, entretanto, por questão principalmente de tempo, apostei no PHP e MySQL, não pela experiência em si, apesar de conhecer bem a linguagem, mas porque eu poderia simplesmente usar meu servidor de site comum e não ter que configurar um ambiente. Dessa forma, perdi menos tempo. Mesmo assim, só consegui fazer 20% do que eu planejei para essa parte.

    Ionic

    Usei e abusei da interface padrão, com poucas modificações e atualizações, observando sempre a documentação quanto ao uso dos componentes. Aqui cabe um outro disclaimer: apesar de já trabalhar há cerca de um ano com Phonegap/Cordova e já ter feito algumas brincadeiras nele, estou mexendo no Ionic há apenas duas semanas, então perdoe-me se eu estou usando alguma má prática em seu código (ao menos os nomes das páginas eu já adianto que estão bagunçadas).

    Sabrina – A Chatbot

    Sabrina foi o nome escolhido para a chatbot. Por quê? Sei lá, veio na cabeça. Basicamente ela usa Watson para poder realizar a conversa. Com algumas poucas diferenças, caso você queira saber mais como funciona essa parte de chatbot, consulte o outro artigo onde eu explico como criar um chatbot simples usando a ferramenta da IBM. Ainda resolvemos dar uma identidade para e os outros membros da equipe a treinaram para responder perguntas de forma a convidar as pessoas que não estão no shopping e ainda sugerir lojas em caso de perguntas menos específicas.

    Obs. Abaixo, vai ter uma área de testes. Se você for testar em nosso site, lembre-se que usamos o plano de 30 dias grátis, então dependendo da data que você ler este artigo pode não funcionar. Também só tivemos tempo para responder uma série limitada de perguntas. E não treinamos a conversação mais complexa (apesar de que você vai encontrar no código trechos que mostra que estava sendo desenvolvido).

    Sabrina Chatbot Watson

    Clube de Vantagens

    A parte do clube de vantagens visava o login fácil pelo Facebook (está implementado em beta no código, mas comentado, pois só funciona compilado). Através disso, pegaria o máximo de informações públicas possíveis, para entender os gostos do cliente. Claro que estou ciente que as novas políticas do Facebook exigem uma aprovação, mas isso não seria problemas para um dos maiores shoppings do Brasil.

    Após esse login, entraria a opção de ver suas informações, compartilhar com amigos, através de um código promocional (que dá pontos), e que ainda daria alguns feedbacks gráficos para estimular uma ludificação. Os valores dados seriam sempre grandes, na margem mínima de 100 pontos para compras menores e 500 pontos para compras maiores. Essa quantidade foi pensado do ponto de vista de marketing, pois pontos maiores dão a sensação de que o retorno é maior, mesmo que a exigência para a conversão em um serviço ou produto fique na casa das dezenas dos milhares.

    QR Code e NFCe

    Por outro lado, havia a necessidade de ler o QRCode e acessar os dados de uma NFCe sem um certificado digital. O maior problema que enfrentamos é: como fazer isso através do servidor, se as Sefaz bloqueiam o cross-origin (ao menos a Sefaz de Pernambuco), retornando o erro “Cross-Origin Read Blocking (CORB) blocked cross-origin response“? Percebi que os outros grupos que envernizaram por esse lado tiveram esse problema e, até onde eu vi os códigos, ninguém realmente resolveu o problema. Então, me atentei que eu simplesmente poderia “enganar” o site da Sefaz para acreditar que eu na verdade sou um usuário direto do navegador. Como? Simplesmente declarando um cabeçalho como Firefox! O trecho fica assim (PHP):

    Obs. Eu não testei com NFCe de outros estados.

    O resultado foi exatamente a XML da NFCe. E como entender e ler? Bem, para isso basta usar o DOM Document, mas se você quiser entender mais sobre como funciona esse processo de nota fiscal eletrônica, leia o artigo que eu escrevi anteriormente sobre o assunto.

    Já o QRCode, o próprio Ionic tem uma solução para isso, e foi implementada, mas me deparei com um problema: Só funcionava corretamente no Android e iOS e eu precisava apresentar tudo no navegador. A solução? Encontrei uma biblioteca de Javascript puro que fazia a leitura do QRCode pela webcam. Então tive que aprender como integrar Javascript puro a um projeto Ionic. Nem foi tão difícil, está compreensível se você olhar a página do QRCode no projeto. O único problema é que a webcam não tem autofoco, então há uma margem curta para que seja lido corretamente o QRCode. Por conta disso, no navegador, pela webcam, eu só consegui ler os QRCodes que estavam sem amassados e bem nítidos. Aliás, testamos uma nota emitida em contingência e, por algum motivo, a URL do QRCode retornava chave inexistente (?).

    Após ser lido, o QRCode retorna uma mensagem com o a pontuação que você efetivamente fez, e retorna também o valor da nota. Ainda envia os detalhes da nota para o backoffice.

    Backoffice

    O backoffice captura os dados e exibe para o usuário. No projeto, os gráficos que estão mostrados no dashboard não são reais, foram colocados manualmente, mas os que mostra as vendas é atualizado em tempo real assim que a pessoa coloca o QRCode. Os nomes dos compradores estão censurados no front, eu sei que deveria ser no back (aliás, já armazenado sem o nome), mas não tive tempo de pensar em segurança e já era 3 da manhã no momento que eu comecei a implementar isso.

    Por conta disso, eu não tive como implementar tudo o que eu queria, de forma que tem mais exemplos do que efetivado.

    O meu intuito era usar todos os dados capturados, inclusive o retorno da Sabrina (a chatbot) para criar índices de relevância de 0 a 100. Exemplo:

    1. João, identificado como usuário J72, perguntou sobre compras de sapato a Sabrina, isso dá 1 ponto na subcategoria calçados para J72, pela intenção de compra.
    2. Se J72 efetivamente comprar o sapato, ele receberá 2 pontos na subcategoria calçados, pela compra realizada.
    3. O cruzamento entre a intenção e compra realizada dá ainda mais 3 pontos, na subcategoria calçados.
    4. Ao todo o processo do usuário J72 resultaria em 5 pontos de relevância para o usuário J72, que seria somado aos seus outros pontos, caso já tivesse.
    5. Quando atingir 70 pontos, na subcategoria calçados, esta será considerada como categoria de relevância para o usuário J72.

    Com isso, a home, mostrada para o usuário J72 seria organizado de acordo com seus índices personalizados e campanhas direcionadas, direto pelo aplicativo e também por notificações, poderiam ser enviadas para os usuários do aplicativo, de acordo com suas relevâncias. Além de, claro, o resultado do acompanhamento dessa campanha.

    Exemplo de como funcionaria a criação de campanha direcionada

    Além disso, esses dados deveriam ser cruzados para sugerir a equipe de marketing, as melhores estratégias de acordo com o comportamento do grupo e em quais mídias seriam mais adequadas para investir em propaganda. Infelizmente, essa foi a parte que não deu tempo de desenvolver, pelos motivos supracitados. Mas, essa imagem, desenvolvida por outros membros da equipe, ajuda a ilustrar a lógica que seria aplicada para a criação do algoritmo. Vale lembrar que, as informações do Facebook, vinculados ao comportamento de compra, ajudaria e as conversas com a Sabrina e as bases de dados que o Shopping já possui, ajudariam a definir o comportamento do público.

    Finalizando

    Disponibilizei todo código desenvolvido, do backoffice e do projeto Ionic no Github, para caso você deseje experimentar ou apenas dar um olhada no código. Mas lembre-se que não vou fazer manutenção de nada, é apenas um exemplo para estudo:

    Star

    Entretanto, se você quiser apenas ver, testar o que foi demonstrado, você pode acessar o backoffice aqui, ou o aplicativo aqui. Caso abra o aplicativo em um desktop ou laptop, recomendo que você use o modo de device toolbar do Google Chome para visualizar corretamente -> Para isso, pressione CTRL+SHIFT+i (substitua ctrl, por command, no Mac) e clique no segundo ícone do canto superior esquerdo do console. Ou simplesmente veja o vídeo abaixo:

    Por que não vencemos? Talvez por não ter tanto tempo para explicar o projeto, talvez por não ter encontrado uma boa forma de demonstrar, ou simplesmente porque não é realmente tão interessante. Mas, de qualquer forma, rendeu um post para o blog, para o qual pode ser útil para alguém que esteja aprendendo Ionic ou qualquer outro tema aqui relacionado. Lembre-se de entrar no grupo do Facebook para tirar mais dúvidas.

    Obrigado para você que leu até aqui e obrigado a equipe que foi integrante desse projeto. Me siga no Twitter e Instagram e deixe seu like no Facebook.

  • Termos Slave e Master são abolidos do Python

    Termos Slave e Master são abolidos do Python

    A partir da versão 3.8 do Python, os termos master e slave serão alterados para worker e helper. A decisão se dá após debates da comunidade sobre a terminologia usada,  que já duram quase duas décadas.

    “Por razões de diversidade, seria legal tentar evitar a terminologia ‘mestre’ e ‘escravo’, que pode ser associada a escravidão”, escreveu Victor Stinner, um dos desenvolvedores no Red Hat, em seu pedido mais recente para troca da terminologia.

    O pedido gerou diversas discussões e dentre sugestões, críticas e respostas, um usuário identificado como Steve D’Aprano, comentou “Na verdade, nas subculturas BDSM, ‘mestre/escravo’ pode ter conotações *positivas*. Você quer dar suporte a diversidade, então por que quer discriminar essa subcultura?”.

    Sugestões foram feitas, como webmaster/postmaster, master/apprentice, parent/children, etc. Mas no final ficou decidido que passaria a se chamar “workers” e “helpers” (algo como operário e ajudante) e o “master process” passará a se chamar “parent process” (processo pai/mãe).

    Apesar da terminologia jé ser muito usado na área de hardware, outras comunidades na área de software já fizeram modificações similares. Em 2014, Drupal e Django trocaram as terminologias para primary/replica e leader/follower, respectivamente.

    Com informações do Motheboard.vice.com e bugs.python

  • Adobe apresenta solução para criação de objetos em Realidade Aumentada

    Adobe apresenta solução para criação de objetos em Realidade Aumentada

    Na última WWDC, a Adobe apresentou uma solução de RA (Realidade Aumentada) que visa facilitar a produção de conteúdo para esse segmento. Nomeada de Adobe Aero, essa solução consiste em um conjunto de ações, complementos e aplicativos para agilizar o desenvolvimento de objetos 3D para realidade aumentada, tanto para design quanto para criação de aplicativos.

    Em colaboração com a Apple e a Pixar, a Adobe também anunciou o suporte de USDZ (Universal Scene Description -Zipped) para o Adobe Creative Cloud. Designers podem criar e editar seus objetos em ferramentas como o Photoshop CC e Dimension CC, para então exportar nativamente para o USDZ que pode ser consumido pelo ecossistema da Apple.

    O Project Aero consiste em desenvolver soluções para serem usadas com o ARKit da Apple e vinculando ao Xcode para refinamento e o uso no desenvolvimento.

    Exemplos do uso das novas funcionalidades da Adobe poderão ser vistos no Festival do Impossível, que vai acontecer no começo de Junho em São Francisco.

    Caso você seja desenvolvedor ou designer e tenha interesse em experimentar o Projeto Aero, estão abertas inscrições para acesso antecipado através do site da própria Adobe. Vale ressaltar que precisa possuir um iPhone 6S ou mais recente para usar a solução.

    Mais informações surgirão na Adobe MAX, durante o outono americano.

  • MacOS Não Rodará Mais Aplicativos 32 Bits

    MacOS Não Rodará Mais Aplicativos 32 Bits

    Desde o lançamento do iOS 11, a Apple exige que os aplicativos enviados para a App Store sejam 64 bits. O mesmo aconteceu com a Mac App Store, que desde o primeiro dia deste ano (2018), passou a não aceitar mais aplicativos 32 bits em sua plataforma.

    Na última versão beta do macOS High Sierra 10.13.4, a Apple está notificando os usuários, por meio de alerta, a informação que o aplicativo está em 32 bits e logo perderá o suporte. Essa mensagem acontece ainda em apenas alguns casos.

    Nas notas do lançamento do beta, a Apple diz:

    “Para preparar para um futuro lançamento do macOS em que 32 bits sem compromisso não mais rodará, começando no macOS High Sierra 10.13.4, um usuário será notificado ao executar um app que depende de software 32-bits. O alerta aparecerá apenas uma vez por app”.

    Apesar de parecer estranha, a mensagem que afirma “sem compromisso” é uma referência a afirmação que a Apple fez na WWDC onde afirmou que o High Sierra “será o último macOS lançado com suporte a apps 32 bits sem compromisso”.

    Mas antes de concluir que a informação se resuma apenas a Mac App Store, a apple informou esta semana:

    “Se você distribui seus apps fora da Mac App Store, nós recomendamos fortemente distribuição em binários 64-bit para ter certeza que seus usuários continuem a rodar suas aplicações em versões futuras de macOS”.

    Nos últimos anos a Apple tem feito um esforço para estimular os desenvolvedores a migrar para 64-bit, trazendo novas funcionalidades no XCode que facilitassem a transição.

    Os próximos lançamentos após o High Sierra deverão trazer restrições a aplicações 32 bits e alertas mais agressivos, até a extinção total do suporte.

     

    Além dos alertas, a Apple também renomeou o app iBooks para Books, atualizações de privacidade e integração.

     

    Com informações da Apple, ArsTechica e 9To5Mac.

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

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