domingo, 21 de fevereiro de 2016

Desktop Publishing - Seu Currículo com LaTeX e xMind

Concordo que criar um currículo não é uma tarefa das mais fáceis. Primeiro que isso não se aprende na escola, segundo que existem milhares de modelos disponíveis, terceiro que existem milhares de regras de conduta para um currículo e quarto que ele deve refletir muito bem o profissional que você é e qual imagem deseja passar. Anote a primeira regra: Um currículo é a sua foto. E por esse motivo, um currículo não deve ter foto (a menos que essa seja solicitada).


Não pretendo falar aqui sobre dar dicas como criar seu currículo (ainda mais porque já fiz isso nessa postagem), o que pretendo aqui é lhe dar um Modelo Pronto para que possa criar seu currículo sem erros ou perda de tempo. Esteja consciente que para isso vamos utilizar duas ferramentas: o LaTeX e o xMind.

Porque não o MS-Office ou OpenOffice? Porque a função principal do LaTeX é a geração de documentos profissionais, e quer algo mais profissional que seu currículo? Esse currículo vale para 90% dos profissionais de quaisquer áreas. Esses 10% que sobra é que este currículo não serve se deseja um cargo que envolva Criatividade, o objetivo aqui é ser muito "sóbrio" e sem muita "criação". Entenda essa diferença com esse modelo de uma Profissional em Marketing.


Este é um currículo tremendamente criativo, não poderia copiá-lo? Não, ser criativo no currículo é ser único então se esta é sua área crie seu currículo e não copie. Outro detalhe, não quero que pense que ser "sóbrio" é ser sem graça, existem toques de criatividade que são permitidos, usaremos o programa xMind para nos auxiliar na criação de alguns Mapas Mentais.

Vamos a primeira parte, baixe os seguintes arquivos necessários para nossa montagem:
Coloquei meu currículo aqui apenas para servir de exemplo e possa ver como ficará o resultado final.

Segunda parte é com o programa xMind é usado para a criação de dois Mapas Mentais, o primeiro é o tradicional no qual colocará todas as tecnologias que conhece por área não parta de um modelo pronto escolha o Mapa que melhor reflete suas características e a disposição entre elas. O segundo é uma linha do tempo, no qual usará a template disponível para criar um resumo de seu histórico profissional durante os anos. Gere duas imagens (uma para cada Mapa) e guarde-as.

A terceira parte é com o LaTeX, para isso é necessário colocar na mesma pasta os dois arquivos disponibilizados e as duas imagens geradas no passo anterior. Agora vamos começar realmente a construir nosso currículo. Pense que um currículo deve responder 3 perguntas:

  1. Quem sou?
  2. O que conheço?
  3. O que fiz com o que conheço?

Para colocar realmente a mão na massa, abra o Modelo do Currículo no seu editor de LaTeX e procure por:
\thispagestyle{empty} % Esta página não possui cabeçalho
\name{ZEZINHO DA ZEZA\\[10pt]}
\address{{\bf Cidade} -- Bairro \\
  Tel. (61) 9999.9999 \\  Tel.Contato (61) 9999.9999}      
Troque para seu nome e seus dados. Esqueça esse negócio de colocar Nº RG ou CPF, Carteira Profissional, Carteira de Habilitação ou outra informação irrelevante, tipo Casado, Pai/Mãe de 2 lindos filhos, Heterossexual, Não Homofóbico, Evangélico... Confesso que já vi as coisas mais bizarras.

Em seu Resumo Profissional fale "quem é você?" a pior coisa que pode fazer aqui é errar o português então MUITA ATENÇÃO neste detalhe. Segunda pior coisa é falar coisa que não deve (quer ser engraçado arrume um emprego de comediante) ou algo que não condiz com seu cargo. Terceira pior coisa é fazer o leitor se perder por divagar demais.

As próximas seções são relativas a seus conhecimentos, em Habilidades, deixei formatado no modelo a forma como ficaria se fosse apenas texto, porém se criou um Mapa Mental com as tecnologias que conhece é hora de usá-lo. Troque esta seção para:
\section{HABILIDADES}
\vspace{120pt}
\includegraphics[width=0.4\textwidth,natwidth=550,natheight=300]{tecnologias.jpg}
Esses 120pt de espaço vertical dependerá de muitos fatores, entre eles o tamanho do seu mapa, então ajuste até se encaixar corretamente.

Em Certificações e Títulos, Educação e Idiomas não é para colocar TODOS seus diplomas mas os mais importantes em cada área. Esqueça aquele curso de Panquecas que fez no final de semana ou a participação nas aulas de Yoga, básico em algum idioma é proibido (por exemplo, sei o básico de Esperanto mas não me arrisco a sequer tentar falar isso) e em Educação coloque Ensino Fundamental apenas se não possui o Ensino Médio, e se possui Graduação comece a partir dai. Coisas óbvias é que ninguém quer saber se foi Campeão no Torneio de Palitinhos da Escola ou se conseguiu capturar todos os Pokemóns no jogo... já disse, vi as coisas mais bizarras.

As próximas duas seções são as mais importantes pois provam todas as anteriores. Ou seja, tudo tem que casar. O principal detalhe de um currículo é sua COERÊNCIA, não adianta colocar que fez um curso de PHP se a vida toda trabalhou com Java. Por exemplo, fiz um curso de 4 meses de Desenho Web, isso mesmo, muito tempo e dinheiro investido, porém abra meu currículo e verá que não tem absolutamente nada indicando isso. Por que? Não é meu foco. Fiz este curso pois desejava me aperfeiçoar na correta criação visual de um sistema e não porque almejo ter o cargo de Desenhista Web em uma empresa.

Acima do Histórico Profissional usaremos a segunda imagem respectiva a Linha do Tempo. Para tanto adicione o seguinte comando:
\section{HISTÓRICO PROFISSIONAL} % Da mais nova para mais antiga
\vspace{8pt}
\includegraphics[width=0.4\textwidth,natwidth=550,natheight=300]{experiencia.jpg}

% Mais Recente
A ideia é permitir o leitor uma visão rápida sobre da vida profissional. Outro detalhe aqui tenho mais de 25 anos de experiência, porém restringi meu currículo a 2004 para frente. Por que? A tecnologia mudou e não adianta ter um currículo com milhares de páginas com coisas antigas. No Linkedin mantenho toda minha carreira profissional e para a existência da última seção Maiores Informações e onde o leitor pode achar mais detalhes sobre seu trabalho. Nada de perder o foco, mantenho dois blogs de Música e de Literatura e ambos não estão no meu currículo.

Se profissional é ter foco e coerência naquilo que se deseja para sua carreira. Vejo bons profissionais não conseguirem uma simples entrevista por terem um péssimo currículo: mal escrito, mal formatado e mal feito. Use esse modelo e não perca mais nenhuma chance.

Obrigado e até a próxima
Fernando Anselmo

domingo, 14 de fevereiro de 2016

REST - YO com MEAN

Acredito que nesse último ano você não tenha vivido em uma caverna e já deve ter ouvido falar de MEAN, isso é uma abreviatura para MongoDB + ExpressJS + AngularJS + NodeJS. Todas aquelas tecnologias que temos discutido aqui neste blog e que estão concentradas na página Novas Tecnologias. A mudança ocorrida no último ano foi usar o gerador Yeoman para criar a estrutura e os artefatos necessários para usar tudo isso sem precisar gastar horas (preciosas).

Para integrar todas essas tecnologias precisamos modificar o gerado que utilizamos até o momento, nos dois artigos que postei sobre o Yo (YO facilitando a vida Angular e Criação de Rotas com o YO), que podem ser utilizados como base para nosso projeto.

Abra uma janela de terminal e instale o gerador através do NPM com o seguinte comando:
sudo npm -g install generator-angular-fullstack
Esse gerador possui, basicamente, os mesmos comandos do generator-angular visto anteriormente, recomendo que acesse sua página oficial. Na estrutura do projeto gerado existe um diferencial que serão criadas duas camadas do projeto divididas na pasta client e na server. Do que já vimos, está tudo concentrado na pasta client, então a novidade fica a cargo dessa nova pasta server.

Para gerar o projeto, vamos seguir os mesmos passos já vistos para o outro gerador. No terminal digite os seguintes comandos:
mkdir coffeshop2
cd coffeshop2
yo angular-fullstack:app coffeshop2
Agora basta seguir o passo a passo do gerador e ir responder suas perguntas escolhendo as tecnologias com que se deseja trabalhar, observe que podemos configurar muitas coisas como o banco que pode ser o MongoDB ou SQL (MySQL ou MariaDB). Segue aqui meu roteiro, para que possamos deixar as tecnologias de modo similar:

# Client

? What would you like to write scripts with? Babel
? What would you like to write markup with? HTML
? What would you like to write stylesheets with? CSS
? What Angular router would you like to use? ngRoute
? Would you like to include Bootstrap? Yes
? Would you like to include UI Bootstrap? Yes

# Server

? What would you like to use for data modeling? Mongoose (MongoDB)
? Would you scaffold out an authentication boilerplate? Yes
? Would you like to include additional oAuth strategies? No
? Would you like to use socket.io? Yes

# Project

? Would you like to use Gulp or Grunt? Grunt
? What would you like to write tests with? Jasmine

Ao término da geração, inicie o servidor do banco MongoDB, em seguida digite o comando para executar o projeto:
grunt serve
E a seguinte janela será mostrada:
Já disse uma vez que odeio ser repetitivo, toda a estrutura contida em client é a mesma vista nos artigos anteriores. Deixarei aqui um pequeno exercício, modifique-a deixando este projeto no exato ponto em que paramos. Porém como não desejo causar qualquer confusão, façamos algo mais simples: gere o projeto conforme indicado, baixe o projeto do link abaixo e sobreponha os arquivos originais.


Já procedi todas as mudanças necessárias para a primeira página e a tradução dos arquivos. É possível assinar a lista de usuários bem como proceder a administração do sistema (email: admin@example.com; senha: admin). O resultado final será este:
Atenção: Este projeto não rodará sozinho pois foram retiradas as pastas node_modules e client/bower_components. Deste modo é necessário gerar o projeto, sobrepor os arquivos e iniciar o banco MongoDB. Em breve vamos dar prosseguimento e criar a página para cadastrar os locais para se achar um bom café.

Obrigado e até a próxima
Fernando Anselmo


terça-feira, 9 de fevereiro de 2016

Desktop Publishing - Cartão de Páscoa com o LaTeX

Se na sua vida nunca fez um trabalho de faculdade então provavelmente para você a palavra LaTeX deve está associada com borracha (ou talvez fez mas usou o Word, OpenOffice ou outro). Pois bem, LaTeX é um sistema de criação de documentos de alta qualidade tipográfica, por esse mesmo motivo é utilizado em faculdades para realização de trabalhos ligados a Pós graduação, Mestrado e Doutorado.


É também utilizado para produção de artigos técnicos ou científicos, porém é possível utilizá-lo para qualquer tipo de publicação. É exatamente isso que pretendo mostrar aqui. Devemos entender que LaTeX não é um editor, é apenas e definição das macros para o programa de diagramação de textos (assim como HTML5 ou XML).

No Ubuntu, escolhi como editor o Kile por ser muito visual, possuir auto complete do código e bem fácil de aprender. Não se preocupe pois existe versão para todos os ambientes (e isso inclui Windows, Mac e BSD).

Para instalar no Ubuntu, execute o seguinte comando em uma janela de terminal:
sudo apt-get install kile
Pronto como a Páscoa está chegando vamos criar um Cartão de Páscoa. Chame o kile e crie um novo projeto. Para nosso exemplo, use uma template vazia. Na página em branco digite a seguinte codificação:
\documentclass[a4paper,10pt]{article}

\usepackage[utf8]{inputenc}
\usepackage{gcard} % chama o pacote para criar o cartão
\usepackage{calligra} % adiciona a fonte calligra
\usepackage[T1]{fontenc} 
\usepackage{graphicx} % adiciona o pacote para a imagem
\usepackage{color} % adiciona a cor para a fonte

\begin{document}
  \begin{frontcover}
    \begin{center}
      \includegraphics[width=0.8\textwidth,natwidth=610,natheight=642]{pascoa.jpg}
      \newline
      \newline
      {\LARGE \color{red} % muda a cor da fonte
      {\calligra Que eu possa continuar a ter uma amizade tão especial quanto a sua...}}
    \end{center}
  \end{frontcover}

  \begin{insideleft}
  \end{insideleft}

  \begin{insideright}
    \section*{Que a alegria}
    da Páscoa invada o seu coração e o daqueles a quem ama, 
    irradiando luz para iluminar e fazer brilhar o mundo em que vivemos, 
    enchendo-o de AMOR, SAÚDE e PAZ. \\
    {\LARGE \color{red}\\ % muda a cor da fonte
    {\calligra Feliz Páscoa!}}
  \end{insideright}
\end{document}
Calma que não existe nada do outro mundo aqui, apenas a sintaxe pode ser desconhecida, mas aos poucos iremos compreender como é simples. O primeiro comando define o tipo de documento que estamos escrevendo. Os comandos usepackage informam ao LaTex quais são os pacotes necessários. Tudo inicia realmente no begin{document} no qual são criadas três partes: frontcover, insideleft e insideright. Na primeira é exibida uma imagem e um texto em fonte Calligra. A segunda está vazia. A terceira uma mensagem.

Agora precisamos de mais os seguintes passos. Salve este arquivo com a extensão .tex, na barra de botões clique no botão LaTeX para gerar o arquivo .dvi e no botão DVItoPDF para gerar o arquivo .pdf. E o resultado, ao abrir o arquivo PDF, será este:


E agora basta imprimir em um papel de qualidade e entregá-lo aos seus amigos e familiares. Uma observação é necessária, na mesma pasta que salvar seu arquivo insira uma imagem para seu cartão (que no código usamos pascoa.jpg) e o arquivo (extensão mf) contendo a fonte Calligra (pode ser baixado aqui).

O LaTex pode ser utilizado para dar uma qualidade profissional tanto para seus trabalhos escolares como para outras atividades de diagramação. Então aproveite e conheça o que esse poderoso sistema pode fazer por você.

Obrigado e até a próxima
Fernando Anselmo

domingo, 31 de janeiro de 2016

REST - Criação de Rotas com o YO

Vamos dar continuidade ao nosso projeto com o Yo (ou Yeoman se prefere) com o Angular.js iniciado na postagem anterior. Quando nosso projeto foi criado com o Yo a estrutura criada foi utilizando as rotas do Angular (arquivo angular-route.js). Existem programadores que preferem trabalhar sem seu uso para facilitar, porém isso atrapalha muito a estrutura do projeto, exigindo um uso excessivo da tag ng-controller e a perda da visão do projeto.


Uma estrutura de rotas facilita a navegação entre as visões, sabemos exatamente qual controlador pertence a qual visão e para onde vai seu link de acesso. Lembre-se que segundo a metodologia REST esse controle é fortemente necessário.

Antes de criarmos uma nova rota, existe um detalhe que me incomoda no Bootstrap: seus ícones. Me desculpe quem gosta, pessoalmente acho-os feios e prefiro utilizar os do Font Awesome.

Para adicionar este pacote ao nosso projeto, acesse o site, baixe o pacote, descompacte e nele encontramos duas pastas essenciais. Na pasta \css copie o arquivo font-awesome.css e coloque na pasta \app\styles do projeto. Copie a pasta \fonts (inteira) para a pasta \app (resultando em \app\fonts). Edite o arquivo index.html na pasta \app e na tag head adicione a seguinte linha.
<link href="styles/font-awesome.css" rel="stylesheet"></link>
Pronto, agora já podemos utilizar esta biblioteca com 605 ícones a nossa disposição e de fácil pesquisa no site.

Agora podemos retornar as rotas. Vamos implementar uma página que mostrará os locais aonde podemos encontrar um bom Café. Não pretendo ainda usar o banco de dados, então os dados ficarão armazenados em memória.

Não pense no Yo apenas como um gerador da estrutura de projetos, uma de suas melhores vantagens é a geração de artefatos para o projeto. Obviamente isto dependerá do gerador utilizado. No caso do gerador do Angular temos a nossa disposição a geração de vários artefatos que incluem: constantes, controladores, decoradores, diretivas, padrão factory, filtros, provedores, rotas, serviços, valores, visões e alguns outros que veremos no decorrer dessas postagens.

Vamos iniciar pelo gerador de rota (route). Na janela de comandos, interrompa o servidor Grunt e digite o seguinte comando:
 yo angular:route contato
Serão realizadas as seguintes ações:
  • Criação do controlador contato.js em \app\scripts\controllers
  • Criação da classe de teste contato.js em \test\spec\controllers
  • Criação da visao contato.html em \app\views
  • Modificação do arquivo app.js com a adição da nova rota 
Ou seja, está tudo pronto para trabalharmos o código das páginas em si, sem termos de nos preocupar com a estruturação do projeto devido a criação de um novo artefato e sua implementação na rota. Reinicie o servidor Grunt e vamos realizar a chamada desta rota no menu principal do sistema. Edite novamente o arquivo index.html na pasta \app e modifique o link descrito em Contact para o seguinte:
<li><a ng-href="#/contato">Contatos</a></li>
Agora temos acesso a página criada a partir do menu.

Modifique o controlador de contato para a seguinte codificação:
'use strict';

/**
 * @ngdoc function
 * @name coffeshopApp.controller:ContatoCtrl
 * @description
 * # ContatoCtrl
 * Controller of the coffeshopApp
 */
angular.module('coffeshopApp')
  .controller('ContatoCtrl', function ($scope) {
    $scope.contatos = [
      {nome: 'Belini Pães e Gastronomia', endereco: 'SCLS 113, Bloco D, Loja 35', telefone: '(61) 3345-0777'},
      {nome: 'Casa de Biscoitos Mineiros', endereco: 'SCLS, Bloco A -21', telefone: '(61) 3242-2922'},
      {nome: 'Café Daniel Briand', endereco: 'SCLN 104 Loja 26', telefone: '(61) 3326-1135'}
    ];

     $scope.adicionarContato = function () {
      $scope.contatos.push({nome: $scope.contato.nome,
             endereco: $scope.contato.endereco,
             telefone: $scope.contato.telefone});
      $scope.contato.nome = $scope.contato.endereco = $scope.contato.telefone = '';
     };
   });
Criamos o JSon que responderá a página com alguns contatos e criamos um método para adicionar um novo contato. Para melhor explicar vou dividir a codificação da visão em 3 partes.

Primeira Parte - Superior da Tela
<div class="container">
  <div class="row">
    <div class="col-md-12 col-xs-12">
      <div class="panel panel-info">
        <div class="panel-heading">
          <div class="panel-title">
            <div class="row">
              <div class="col-md-12">
                <h5><span class="fa fa-coffee"></span> Locais para Tomar um Café</h5>
              </div>
            </div>
          </div>
        </div>
Acredito que o único problema aqui seja essa complexidade de tags div. Uma simples regra para o Projeto Web Responsivo é quanto ao uso das tags table, tr e td que são trocadas por estrutura de divisões. O Bootstrap provê classes muito bem definidas para que possamos realizar essa troca, e é basicamente isso que estamos estruturando.
Segunda Parte - Dados da Tela
        <div class="panel-body">
          <div class="row" ng-repeat="contato in contatos">
            <div class="col-md-4 col-xs-12">
              <strong>{{contato.nome}}</strong>

              <small>
                <span class="fa fa-home" style="opacity:0.5"></span> {{contato.endereco}}
                <br />
                <span class="fa fa-phone" style="opacity:0.5"></span> {{contato.telefone}}
              </small>
            </div>
          </div>
        </div>
Mostramos os dados que estão armazenados no JSon com a tag do Angular ng-repeat.

Terceira Parte - Formulário da Tela
        <div class="panel-footer">
          <form style="padding: 0 10px 10px 5px" name="frmContato">
            <div class="input-group">
              <span class="input-group-addon"><i class="fa fa-male fa-fw"></i></span>
              <input class="form-control" type="text" ng-model="contato.nome" placeholder="Nome" />
            </div>
            <div class="input-group" style="padding-top:5px;">
              <span class="input-group-addon"><i class="fa fa-home fa-fw"></i></span>
              <input class="form-control col-xs-12" type="text" ng-model="contato.endereco" placeholder="Endereço" />
            </div>
            <div class="input-group col-lg-6" style="padding-top:5px;">
              <span class="input-group-addon"><i class="fa fa-phone fa-fw"></i></span>
              <input class="form-control" type="text" ng-model="contato.telefone" placeholder="Telefone" />
            </div>
            <div style="text-align:right;padding-top:10px;">
              <button class="btn btn-success" ng-click="adicionarContato()">Adicionar Contato</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>
Na parte final criamos um formulário para adicionarmos um novo contato, através da chamada a função adicionarContato(). Como as tags input possuem o parâmetro ng-model o Angular poderá reconhecer os campos digitados e passá-los através do $scope.

E nossa tela está conforme a seguinte figura:


E já podemos visualizar e adicionar alguns contatos. Pronto, simples assim.

Obrigado e até a próxima
Fernando Anselmo

sábado, 23 de janeiro de 2016

REST - YO facilitando a vida Angular

O que mais gosto na tecnologia é como as coisas mudam rápido. Se dissesse a 10 anos que o JavaScript causaria uma revolução nas páginas Web, provavelmente seria taxado de louco. Atualmente estamos vendo não apenas a aceitação dessa linguagem, mas o seu completo domínio.

Obviamente seus filhos é que estão ganhando o mercado. O Angular.js da Google é sem dúvida a "menina loirinha e dos olhos azuis" desses filhos. Angular é prático, rápido, fácil de usar e com uma infinidade de recursos - publiquei uma série de artigos em 2013 sobre este framework. Porém nesse ambiente um único detalhe deixa a desejar: a montagem de um projeto consistente que permita crescer. Essa parte está completamente amarrada a capacidade e conhecimento do arquiteto.

Para resolver este problema, encontramos o Yo. Um framework com a função de manter a arquitetura de seu projeto voltada as boas práticas do mercado, e assim podemos nos preocupar somente com a codificação.


Criar uma aplicação Angular com o Yo é muito fácil e arquiteturalmente falando muito prática, já seguindo as regras de um bom modelo MVC. Vamos montar uma aplicação como forma de entendermos como funciona.

Instalação

Este tutorial está criado para o Ubuntu (meu sistema), mas acredito que facilmente poderá ser adaptado para qualquer sistema.
$ sudo npm install -g yo generator-angular generator-karma grunt-cli bower
Instalamos através do npm o yo, o Gerador do Angular, arquivos necessários para acessarmos o servidor Grunt e o gerenciador de dependências Bower. A diretiva -g indica que serão instalados de forma global para que não necessitemos mais instalá-los (esse passo só será realizado esta vez). Importante: Instale o Git.

Criar a Aplicação

Uma vez que todos os aplicativos estão instalados podemos criar uma aplicação.
$ mkdir coffeshop
$ cd coffeshop
$ yo angular:app coffeshop
Criamos uma pasta para abrigarmos o projeto. Acessamos esta pasta. Criamos os arquivos necessários para a aplicação - Responda "N" para a troca do Grunt pelo Gulp e para o uso do Sass.

Por fim iniciamos o servidor Grunt com o seguinte comando:
$ grunt server
E a seguinte página inicial será mostrada:


O servidor Grunt é excelente, permite o hot deploy de sua aplicação, isto é, ao realizar mudanças a página é dinamicamente reprocessada sem a necessidade de reiniciar o servidor. Pronto, já foi criado toda a estrutura necessário para se começar a trabalhar com o Angular, Bootstrap e Karma - este último é um framework de testes unitários que verifica os erros de suas páginas. Para executar os testes com o Karma é necessário baixar os pacotes localmente, para isso digite Ctrl+C para interromper o servidor e instale os pacotes com o comando:
$ npm install karma jasmine-core phantomjs phantomjs-prebuild
Execute o teste com o seguinte comando:
$ grunt test
Poderíamos parar por aqui, mas quero iniciar um pequeno aplicativo, inicie novamente o servidor do Grunt. Sou louco por café, para se ter uma ideia do quanto comprei uma dessas máquinas italianas para preparar um bom Cappuccino e todas suas variações.

Para o primeiro passo, baixe as imagens necessárias (no link abaixo) e descompacte-as na pasta \app\images da aplicação.

Baixar as images

Segundo passo, modifique o arquivo main.js que se encontra na pasta \app\scripts\controller para a seguinte codificação:
'use strict';

/**
 * @ngdoc function
 * @name coffeshopApp.controller:MainCtrl
 * @description
 * # MainCtrl
 * Controller of the coffeshopApp
 */
angular.module('coffeshopApp')
  .controller('MainCtrl', function ($scope) {
    $scope.coffes = [
      {nome:"Affogato", imagem:"cafe01", descr:"Sorvete de baunilha com um pouco de expresso"},
      {nome:"Americano", imagem:"cafe02", descr:"Expresso diluído com água quente"},
      {nome:"Black coffe", imagem:"cafe03", descr:"Café sem a adição de leite"},
      {nome:"Cafe au Lait", imagem:"cafe04", descr:"Partes iguais de café e leite"},
      {nome:"Cafe Breva", imagem:"cafe05", descr:"Expresso servido com meio a meio"},
      {nome:"Cafe Latte", imagem:"cafe06", descr:"Curto expresso com leite quente e, um pouco de espuma de leite"},
      {nome:"Cappuccino", imagem:"cafe07", descr:"Curto expresso com a combinação de leite quente e fervido. Cappuccino possui uma larga espuma de leite com um café com leite"},
      {nome:"Double", imagem:"cafe08", descr:"Duas partes de expresso usados como um drink expresso"},
      {nome:"Dry Cappuccino", imagem:"cafe09", descr:"Cappuccino feito com um pouco de expuma de leite"},
      {nome:"Expresso", imagem:"cafe10", descr:"Leite quente é forçado por um fino cano com café para produzir uma forte bebida"},
      {nome:"Expresso con Panna", imagem:"cafe11", descr:"Uma porção de expresso com um pouco de espuma de creme"},
      {nome:"Expresso Macchiato", imagem:"cafe12", descr:"Uma porção de expresso com um pouco de espuma de leite"},
      {nome:"Flat White", imagem:"cafe13", descr:"Expresso com leite vaporizado derramado de um jarro quente com um pouco de expresso"},
      {nome:"Flavoured Coffee", imagem:"cafe14", descr:"Blend de café com xaropes de especiarias de diferentes sabores"},
      {nome:"Frappe", imagem:"cafe15", descr:"Expresso ou Blend de café instantâneo com açucar, água, leite e gelo"},
      {nome:"Iced Coffe", imagem:"cafe16", descr:"Café servido com gelo"},
      {nome:"Indian Filter Coffe", imagem:"cafe17", descr:"Café e chicória produzem um doce café que é servido com leite"},
      {nome:"Kopi Tubruk", imagem:"cafe18", descr:"Um fino café feito com grãos de café fervido e açúcar sólido"},
      {nome:"Long Black", imagem:"cafe19", descr:"Um blend de água quente e expresso"},
      {nome:"Lungo", imagem:"cafe20", descr:"Água quente é passada duas vezes sobre o pó de café para produzir uma forte bebida"},
      {nome:"Melya", imagem:"cafe21", descr:"Blend de cafe com uma colher de cacau e mel"},
      {nome:"Mocha", imagem:"cafe22", descr:"Um cappuccino com a adição de xarope de chocolate"}
    ];
  });
Agora temos uma resposta JSON chamado coffes com todos os 22 tipos de café mais conhecidos do mercado, suas descrições e qual foto corresponde a cada café. E na página principal (arquivo main.html na pasta \app\views) mostramos todos esses tipos, modificando seu código para:
<style type="text/css">
.marketing {
  text-align: center;
  margin: 10px 0 10px 0;
}
.marketing p {
  font-size: 14px;
  margin: 10px 10px 10px 10px;
}
</style>
<div class="jumbotron">
  <h2>Tipos de Cafés Disponíveis</h2>
  <div class="container">
    <div ng-repeat="coffe in coffes">
      <div class="row marketing" ng-show="{{$index%3 == 0}}"></div>
      <div class="col-md-4 col-sm-4 col-xs-12 marketing">
        <img ng-src="images/{{coffe.imagem}}.png" alt="Cafe" class="img-circle">
        <h2>{{coffe.nome}}</h2>
        <p class="marketing">{{coffe.descr}}</p>
        <a href="#/" class="btn btn-default">Detalhes...</a>
      </div>
    </div>
  </div>
</div>
E agora a janela principal possui a seguinte aparência:


E apenas para deixarmos as coisas bem arrumadas. Na classe de teste da janela principal (main.js em /test/spec/controllers/main.js) modifique a seguinte função:
  it('should attach a list of awesomeThings to the scope', function () {
    expect(MainCtrl.awesomeThings.length).toBe(3);
  });
Para:
  it('should attach a list of coffes to the scope', function () {
    expect(scope.coffes.length).toBe(22);
  });
Em breve iremos adicionar mais alguns detalhes para aprendermos como o Yo pode auxiliar na criação dos artefatos necessários e organização de seus projetos, por enquanto recomendo que estude como o projeto está distribuído.

Obrigado e até a próxima
Fernando Anselmo

sábado, 16 de janeiro de 2016

Empregabilidade - Mostre seus projetos

Sempre penso em Ser Empregável, deixo meu currículo e perfil no Linkedin os mais atuais possíveis e leio diversos artigos sobre o tema. Em um desses me deparei com o seguinte título 5 coisas que os recrutadores adoram ver nos Currículos e trouxe exatamente as quatro seguintes:

  • Nenhum erro de português
  • Apresentação impecável
  • Nomes fortes
  • Palavras-chave
Acredito que a quinta devia ser Coerência, Vamos pensar uma entrevista na qual o entrevistador pergunta: Conhece tal coisa? E você responde: Tenho conhecimento por tê-la estudada em casa (ou na faculdade, ou fiz um projeto no trabalho). Por qualquer dessas respostas concorda comigo que fica muito pobre? Agora imagine se você responde: Sim, publiquei um sistema completo com essa tecnologia no GitHub no qual tive XXX downloads e diversas contribuições que me permitiram melhorar o código e me aprofundar mais sobre o assunto, o projeto está no endereço tal. Acredito que sem dúvida alguma seria uma resposta mais Coerente e interessante.


Por que deveria publicar um sistema aberto para que todos possam copiar e aprender meu código? Isso é pensamento de pessoa que não deveria se candidatar a uma vaga de emprego e sim criar sua empresa de vender software. Se seu objetivo final não é vender um sistema mas mostrar seu trabalho, use a ajuda da comunidade para divulgá-lo. Pessoas como Linus Torvalds são admiradas, contratadas e muito bem pagas porque resolveram se expor ao mundo.

Pensando nisso resolvi publicar um pequeno tutorial como é possível compartilhar um projeto no GitHub. Este tutorial está criado para o Ubuntu (meu sistema), mas acredito que facilmente poderá ser adaptado para qualquer sistema.

Pequeno Tutorial de Publicação no GitHub

1º Passo - Criar sua conta no https://github.com/

2º Passo - Uma vez criada a conta, criar um novo repositório. Este lhe dará um endereço de publicação, algo como https://github.com/[seu usuário]/[seu projeto].git

3º Passo - Instalar o aplicativo para o sistema. No Ubuntu abra uma janela de terminal e digite o seguinte comando (para outros sistemas veja em https://git-scm.com/downloads):
$ sudo apt-get install git
4º Passo - Criar seu projeto. Escolha uma pasta para seu projeto e digite o seguinte comando:
$ git init [nome do seu projeto]
Pronto foi criada uma pasta com seu projeto. Acesse esta pasta e agora basta criar os fontes de sua aplicação.

Para subir os fontes para o GitHub

Antes de pensar em subir qualquer arquivo é importante gerar uma arquivo texto chamado README.md pois este será usado como capa e explicação do que é seu projeto, o que faz e como usá-lo. Então digite os seguintes comandos para subir este arquivo (que podem ser utilizados para seus outros fontes):
$ git add README.md
$ git commit -m "[comentário sobre o que é este commit, por exemplo: versão 1.0...]"
$ git remote add origin https://github.com/[seu usuário]/[seu projeto].git (somente a primeira vez)
$ git push -u origin master

Ações do Dia a Dia

1. Adicionar os arquivos do projeto ao Git
$ git add [nome arquivo]
2. "Comitar" os arquivos
$ git commit -m "[comentário do commit]"
3. Fazer um "push" para o Git
$ git push origin master
E seu arquivo estará no GitHub a disposição de todos.

Obrigado e até a próxima
Fernando Anselmo

PS. Minha conta de projetos no Git está em https://github.com/fernandoans

sábado, 2 de janeiro de 2016

Programação - Operador de deslocamento de bits

Falando de C existem três operadores que causam muita confusão na cabeça dos programadores. Chamados de deslocamento de bits e são << (deslocamento a esquerda), >> (deslocamento a direita com sinal) e >>> (deslocamento a direita com sinal).

Antes de falar como ocorre com os operadores de deslocamento, devemos entender como os números são formados no computador. Sabemos que possuímos 4 tipos de inteiros:
  • byte - com 8 bits
  • char e short - com 16 bits (sendo que o char não possui o bit de sinal)
  • int - com 32 bits
Analisaremos o byte para entendermos o conceito, essa é uma regra se aplica a todos os tipos. Pensemos em um valor qualquer, por exemplo: 47. Como é a representação desse decimal em binário? Esqueça aquele negócio de elevar a 2 ou qualquer maluquice do gênero. Crie uma régua iniciando do 1 e sempre dobrando seu valor para o bit seguinte, então a representação de um byte (que possui 8 bits) será:
128 64 32 16 8 4 2 1
Não precisamos de mais nada, agora devemos fazer uma pergunta para cada bit: 47 é maior ou igual ao seu valor? Se sim marque 1 e subtraia o valor do bit (para o próximo bit use esse resultado ao invés de 47) senão marque 0. Faça isso para todos os números e o resultado será o seguinte:
128 64 32 16 8 4 2 1
  0  0  1  0 1 1 1 1
47 é maior que 32 e sobra 15, 15 é maior que 8 e sobra 77 é maior que 4 e sobra 33 é maior que 2 e sobra 1 e marcamos a coluna do 1 por ser igual. Todos os outros ganham 0. Devemos saber que o primeiro bit é de sinal, se ele fosse marcado o valor seria negativo.

Para converter um binário em decimal, se o número é positivo (ou seja, o bit de sinal é 0) basta somar o valor dos bits ligados (que possuem o valor 1), 32+8+4+2+1 = 47. Se o número fosse negativo faríamos 128 menos a soma dos outros. Curiosamente o número -1 é representado com todos os bits ligados.

Pronto agora que sabemos realizar a conversão, podemos partir para o operador de deslocamento. Apenas devemos ter em mente uma propriedade do Cqualquer operação realizada com tipos inteiros o resultado é automaticamente passado para um tipo int. Ou seja, se deslocarmos os bits de um byte o resultado será um int (e não um byte), o que isso tem a ver? Saímos de 8 bits e entramos em 32 bits, por exemplo: 47 << 2, já sabemos como é a representação binária de 47, então basta andar com os bits 2 casas a esquerda resultando em:
128 64 32 16 8 4 2 1
  1  0  1  1 1 1 0 0
E parece que agora temos um número negativo, se fosse um tipo byte isso seria verdade, porém a representação do tipo int conta com mais 3 conjuntos desse e o resultado é 188. Observe que preenchemos todos os espaços vazios com 0. Já o deslocamento a direita, por exemplo 47 >> 2 resulta em:
128 64 32 16 8 4 2 1
  0  0  0  0 1 0 1 1
O que dá o valor 11. Preenchemos com 0 os espaços vazios pois é um valor positivo, se fosse negativo seria preenchido com 1, a diferença para o outro operador com 3 sinais é que nesse sempre é preenchido com 0 (ou seja, um número negativo vira positivo qualquer que seja seu deslocamento).

Tudo bem, entendemos como é realizado o processo, mas para que serve? Deslocamento a esquerda é a multiplicação do número por 2 elevado ao valor deslocado e deslocamento a direita a divisão do número por 2 elevado ao valor deslocado. Isso é realizado para buscar uma melhor performance e simplificar programas que envolvem muitos cálculos matemáticos, vamos comparar a performance em 2 programas escritos em Java e Python usando esses operadores e seus equivalentes matemáticos.

Observação, lembro que Java não existe operador para exponenciação e devemos usar o método Math.pow(n,e), já em Python usamos o operador **.

Em Java

import java.text.SimpleDateFormat;

public class Desloca {

    private SimpleDateFormat sdf = new SimpleDateFormat("hh:mm:ss:SSSS");
    
    public static void main(String [] args) {
        new Desloca().testar();
    }
    
    private void testar() {
        porMultiplicacao();
        porDeslocamentoEsq();
        porDivisao();
        porDeslocamentoDir();
    }
    
    private void porMultiplicacao() {
        int i = 3000;
        double j = 0;
        System.out.println("Por Multiplicação: " + sdf.format(new java.util.Date()));
        for (int z = 0; z < 1000000; z++) {
            j = i * Math.pow(2,7);
        }
        System.out.println("Por Multiplicação: " + sdf.format(new java.util.Date()));
        System.out.println(j);
    }

    private void porDeslocamentoEsq() {
        int i = 3000;
        double j = 0;
        System.out.println("Por Desl.Esq: " + sdf.format(new java.util.Date()));
        for (int z = 0; z < 1000000; z++) {
            j = i << 7;
        }
        System.out.println("Por Desl.Esq: " + sdf.format(new java.util.Date()));
        System.out.println(j);
    }

    private void porDivisao() {
        int i = 3000;
        double j = 0;
        System.out.println("Por Divisão: " + sdf.format(new java.util.Date()));
        for (int z = 0; z < 1000000; z++) {
            j = i / Math.pow(2,7);
        }
        System.out.println("Por Divisão: " + sdf.format(new java.util.Date()));
        System.out.println(j);
    }

    private void porDeslocamentoDir() {
        int i = 3000;
        double j = 0;
        System.out.println("Por Desl.Dir: " + sdf.format(new java.util.Date()));
        for (int z = 0; z < 1000000; z++) {
            j = i >> 7;
        }
        System.out.println("Por Desl.Dir: " + sdf.format(new java.util.Date()));
        System.out.println(j);
    }
}

Em Python

import datetime

def porMultiplicacao():
    i = 3000
    j = 0
    print("Multiplicar: ", datetime.datetime.now().time())
    for z in range(0, 1000000):
        j = i * (2 ** 7)
    print("Multiplicar: ", datetime.datetime.now().time())
    print(j);

def porDeslocamentoEsq():
    i = 3000
    j = 0
    print("Por Desl.Esq: ", datetime.datetime.now().time())
    for z in range(0, 1000000):
        j = i << 7;
    print("Por Desl.Esq: ", datetime.datetime.now().time())
    print(j);

def porDivisao():
    i = 3000
    j = 0
    print("Dividir: ", datetime.datetime.now().time())
    for z in range(0, 1000000):
        j = i / (2 ** 7);
    print("Dividir: ", datetime.datetime.now().time())
    print(j);

def porDeslocamentoDir():
    i = 3000
    j = 0
    print("Por Desl.Dir: ", datetime.datetime.now().time())
    for z in range(0, 1000000):
        j = i >> 7;
    print("Por Desl.Dir: ", datetime.datetime.now().time())
    print(j);

def testar():
    porMultiplicacao()
    porDeslocamentoEsq()
    porDivisao()
    porDeslocamentoDir()

if __name__ == '__main__':
    testar()

Realizamos um milhão de vezes cada cálculo e mostramos o tempo inicial e final. Não estou dizendo que a partir de agora está proibido realizar o operador elevado a dois, quis apenas demonstrar a utilidade e razão da existência deste operador de deslocamento. Usá-lo ou não depende de muitos fatores e ao bom senso dos programadores.

Obrigado e até a próxima
Fernando Anselmo