Mobile - Ubuntu Phone ou Android

Certa vez um aluno me perguntou: Qual a diferença entre o Ubuntu Phone e o Android, visto que os dois são uma distribuição Linux para celular? Acho que o detalhe mais precioso em ser professor está exatamente aí, nas questões que normalmente não pensamos e que devemos ter a resposta na ponta da língua (ou usar a velha desculpa, irei pesquisar e lhe darei a resposta).

Mas neste caso a resposta foi simples, simples como uma tese de doutorado, creio que a maior diferença seja que o Ubuntu Phone nasceu como um Sistema Operacional nativo para Linux a partir do Debian enquanto que o Android foi adaptado para ser um Linux. Calma e antes que os defensores do Android queiram minha cabeça explico.

Android nasceu para ser colocado em um Celular em uma época que as pessoas não conheciam a palavra "Convergência". Sua base de construção foi o Kernel do Linux com algumas modificações para se adaptar ao dispositivo móvel, simplificando o Android é uma máquina virtual Java (denominada Dalvik) sobre um Linux, possui suporte para o desenvolvimento de aplicações nesta linguagem através de um conjunto com bibliotecas e serviços. Basta ver qualquer imagem de sua estrutura:

Ubuntu Phone é bem diferente, primeiro que ele nasceu no Desktop, a primeira versão era chamada de Ubuntu Touch e servia para se utilizar com telas sensíveis ao toque, que começavam a aparecerem em muitos Notebooks. A segunda tentativa foi colocar esse sistema no telefone, porém era restrito ao Nexus, e ainda assim muitas vezes travava, consumia muita bateria, não aparecia a som e muitos outros problemas. A terceira foi em 2014 quando surgiu o BQ Aquaris E4.5 Ubuntu Edition, só vendido em 2015 e restrito a Europa.

Paro a história por aqui, que pode facilmente ser lida na Wikipedia, e retorno ao sistema em si. A ideia central da Canonical é criar um sistema que permita a "Convergência", e o que é isso? Pense em todo o hardware que existe a sua disposição: desktop, notebook, tablet, celular, relógio, televisão, carro, e por essa linha vamos. Agora vamos pensar no lado do desenvolvedor ou mesmo de um usuário. Um aplicativo que roda no Desktop provavelmente também roda no Notebook pelo simples motivo do sistema operacional de ambos serem o mesmo. Se o tablet possuir o mesmo sistema então é bem provável que o mesmo aplicativo também rode, se o celular possuir o mesmo sistema, e por aí vai em uma Convergência entre Hardware e Software. Ou seja, seria o melhor dos mundos para qualquer desenvolvedor ou usuário.

É essa a loucura que todos os Sistemas Operacionais perseguem atualmente e podemos dizer que o Ubuntu está na frente, o sistema em desktop está se adaptando para um novo modelo de pacotes (denominado Snappy) e já roda em celulares e tablets com razoável estabilidade e sucesso.

O Android permanece preso ao mundo móvel, não que isso seja uma falha ou um problema, é apenas uma característica de um sistema que nasceu para dispositivos móveis enquanto que o Ubuntu Phone foi definido como um sistema para realizar a Convergência.

Obrigado e até a próxima
Fernando Anselmo

Saiba mais →

Apresentação - Controle via Celular seus Slides Livremente

Criar apresentações profissionais não é fácil, conheço muitos bons palestrantes que criam fantásticas palestras só que ficam preso ao computador pois devem passar os slides. O que pretendo ensinar aqui é uma dica de ouro para qualquer pessoa que deseje impressionar na hora de apresentar suas palestras.

Porém tudo o que for mostrado aqui só serve para o Mundo Livre, isto é, o software de apresentação dos slides deve ser o Impress do LibreOffice (não serve PowerPoint) o celular deve ser Android (não serve iPhone) e a aplicação é obtida gratuitamente.

No Impress é necessário realizar 2 configurações:

1. No menu superior acessar a opção "Tools | Options", no lado esquerdo acessar "LibreOffice Impress" e "General". Marcar as opções "Enable remote control" e "Enable Presenter Console".
2. No menu superior acessar a opção "Tools | Options", no lado esquerdo acessar "LibreOffice" e "Advanced". Marcar a opção "Enable experimental features".

Sair e entrar novamente no Impress para as alterações fazerem efeito.

Agora vamos colocar o aplicativo no celular. Acessar a Play Store e instalar o aplicativo Libre Office Impress Remote. Existem duas formas de realizar a conexão: Via Bluetooth (ideal para quando não existe rede WiFi) ou via WiFi (o celular e o computador devem estar na mesma rede).

Acessar o aplicativo através do celular e selecionar a aba "WIFI", automaticamente o computador será reconhecido e basta clicar nele. A primeira vez será informado um PIN de conexão, no Impress acessar no menu superior a opção "Slide Show | Impress Remote", o celular que está tentando realizar a conexão será mostrado, clicar nele e informar o número do PIN de conexão.

Tudo pronto, no celular aparecerá os slides, as anotações e inclusive se existir um Relógio (Android Wear) conectado ao celular é possível passar os slides através deste. O programa permite saltar slides, utilizar ponteiro laser, pausar ou parar sua apresentação, ou seja, agora está com toda a liberdade para andar na sala e ter o controle total de seus slides.

Obrigado e até a próxima

Fernando Anselmo

Saiba mais →

Web - Retorno a Simplicidade com JSP e MongoDB

A anos programo com Java, principalmente com JSP, e o único detalhe que percebo é que as pessoas deixaram de ser simples. Por exemplo, muitos reclamam que no aviso de emprego é exigida muita coisa do profissional solicitado. Porém o único culpado disso é o próprio profissional (ou talvez o Arquiteto). Me pergunto se realmente essa complexidade toda é realmente necessária.

Atualmente para criar qualquer sistema Web é necessário conhecimento (vou citar apenas Java para não me estender muito) de: Linguagem Java, HTML 5, CSS 3, Bootstrap, JQuery, JSON, JSF ou Struts 2 ou Spring ou os três, Symphony, Hibernate, JDBC, vários Design Patterns Java e J2EE, JBoss ou outro Application Server e Banco de Dados. Porém o que o profissional não entende é que do lado do cliente muito pouca coisa mudou. Então do ponto de vista dele "porque tenho que pagar mais para receber a mesma coisa"? ou seja, o salário de um programador com essa gama de conhecimento não mudou para o tempo que só precisava de JSP, HTML, TomCat e Banco.

Toda essa mudança foi criada buscando facilitar a "modificação" do sistema, porém o que ninguém percebeu é que estávamos complicando muito o desenvolvimento, acabamos por tornar os sistemas muito mais difíceis de gerar e dar manutenção com suas 6 ou 7 camadas. Quando acontece um erro o profissional não tem a menor noção nem por onde começar.

Resolvi criar um pequeno sistema para incluir dados em um banco NoSQL e percebi que o mínimo necessário de requisitos seria:

• Conhecimento de Java Básico.
• Conhecimento de HTML 5 (CSS 3 e Bootstrap apenas se desejar melhorar o visual).
• Conhecimento de JSP e JSTL.
• Uso de 2 padrões de projeto J2EE (TO e DAO).
• Uso do TomCat (qual a finalidade de um Application Server se não desejo usar EJB?).
• Conhecimento das funções do Conector do Banco de Dados.

Preparação do Ambiente

Referência: Entenda como funciona a conexão MongoDB e Java através dessa apostila.
Básico: Java instalado, MongoDB instalado, Eclipse instalado e Servidor Web TomCat instalado.
Básico 2: Configure o TomCat no Eclipse

Abra o Eclipse e crie um projeto Dynamic Web Project e na pasta WEB-INF\lib insira as seguintes bibliotecas:

• Conector Java para o MongoDB
• JSTL

Vamos começar pela configuração do site, na pasta WEB-INF crie um arquivo chamado "web.xml" e insira a seguinte codificação:

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
  <display-name>Escola</display-name>
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
</web-app>

Este arquivo contém as informações básicas para o Servidor Web na hora de tratar as páginas, somente foram colocadas duas informações: 1. Nome do Sistema e 2. Quem será a página inicial.

Camada Visual

Todas as páginas JSP devem ser criadas abaixo da pasta WebContent. Como não desejo popular de códigos a index.jsp (página inicial) colocaremos apenas a seguinte codificação para chamar a página de cadastro dos alunos:

<h1>Escola de Alunos</h1>
<ul>
 <li><a href="IEaluno.jsp">Cadastro de Alunos</a>
 <li><a href="IEprofessor.jsp">Cadastro de Professores</a>
</ul> 

Apenas uma chamada HTML, note que já deixei a chamada ao cadastro de Professores, este será seu exercício como forma de implementá-lo para verificar se realmente aprendeu algo.  O resultado de sua execução será este:

A página de cadastro de alunos (IEaluno.jsp) está dividida em duas partes conforme o código a seguir:

<!DOCTYPE html>
<html>

<%@page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<head>
<%
  response.setHeader("Cache-Control", "no-cache");
  response.setHeader("Cache-Control", "no-store");
  response.setHeader("Pragma", "no-cache");
  response.setDateHeader("Expires", 0);
%>
</head>

<body>
  <form action="ICaluno.jsp">
    Nome: <input name="nome"><br /> 
    Nota: <input name="nota"><br /><br />
    <input type="submit" />
  </form>
  <h2>Alunos</h2>
  <jsp:useBean id="alunoDAO" scope="page" class="dao.AlunoDAO" />
  <table>
    <tr>
      <th>Nome</th>
      <th>Nota</th>
    </tr>
    <c:forEach var="al" items="${alunoDAO.obter}">
      <tr>
        <td>${al.nome}</td>
        <td>${al.nota}</td>
      </tr>
    </c:forEach>
  </table>
</body>
</html>

A primeira parte é o formulário que chamará a próxima página para enviar os dados e proceder a inclusão e a segunda parte é uma listagem de todos os alunos que estão no banco.  O resultado de sua execução será este:

A próxima página (ICaluno.jsp) envia as informações ao TO e a DAO e realiza o procedimento de inclusão.

<!DOCTYPE html>
<html>

<%@page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<body>
  <jsp:useBean id="aluno" scope="page" class="to.Aluno" />
  <jsp:setProperty name="aluno" property="nome" value="${param.nome}" />
  <jsp:setProperty name="aluno" property="nota" value="${param.nota}" />

  <jsp:useBean id="alunoDAO" scope="page" class="dao.AlunoDAO" />
  <jsp:setProperty name="alunoDAO" property="aluno" value="${aluno}" />
  <SCRIPT>
    alert("" + <jsp:getProperty name="alunoDAO" property="inserir" />
        + " aluno inserido com sucesso.");
    history.go(-1)
  </SCRIPT>
</body>

Com os dados do formulário preenchemos um objeto TO e esse objeto é enviado para a DAO proceder a inclusão. O resultado de sua execução será este:

Camada de Negócios

Todos os arquivos .java devem ser criados abaixo da pasta src (que se encontra dentro de Java Resources), crie nesta 2 pacotes dao e to. O padrão TO (Transfer Object) é muito simples, é uma classe que representa um registro do arquivo, já o DAO (Data Access Object) é o que faz toda a implementação e conversação com o Banco de Dados. Normalmente os arquitetos complicam a vida adicionando mais 4 padrões: BO (Bussiness Object), VO (Value Object), DTO (Data Transfer Object) e POJO (Plain Old Java Object). Não pretendo discutir o uso ou o valor de cada um deles deixarei isso para os arquitetos, pois como disse aqui busco a simplicidade.

No pacote TO crie a classe Aluno.java com a seguinte codificação:

package to;

public class Aluno {

  private String nome;
  private int nota;
  
  public Aluno() {
  }
  public Aluno(String nome, int nota) {
    setNome(nome);
    setNota(nota);
  }
  
  public String getNome() {
    return nome;
  }
  public void setNome(String nome) {
    this.nome = nome;
  }
  public int getNota() {
    return nota;
  }
  public void setNota(int nota) {
    this.nota = nota;
  }
}

Observe que não existe nada demais aqui, uma classe Java normal com métodos GET/SET. Mantive 2 construtores apenas para respeitar o padrão Bean. Agora vamos para a camada DAO, Crie uma ENUM (TipoColecao) com a seguinte codificação:

package dao;

public enum TipoColecao {
  ALUNO, PROFESSOR;
}

Entenderemos a existência dessa classe na próxima classe criada que será herdada por qualquer outra classe deste pacote e por esse motivo ela é abstrata:

package dao;

import com.mongodb.MongoClient;
import com.mongodb.client.MongoDatabase;
import com.mongodb.client.MongoCollection;
import org.bson.Document;

public abstract class DAO {

  protected MongoCollection col;
  private MongoDatabase db;
  private MongoClient mongo;
  
  protected boolean conectar() {
    try {
      mongo = new MongoClient("localhost", 27017);
      db = mongo.getDatabase("escola");
    } catch (Exception e) {
      return false;
    }
    return true;
  }
  
  protected void setColecao(TipoColecao tpCol) {
    switch (tpCol) {
    case ALUNO:
      col = db.getCollection("aluno");
      break;
    case PROFESSOR:
      col = db.getCollection("professor");
      break;
    }
  }
  
  protected boolean desconectar() {
    try {
      mongo.close();
    } catch (Exception e) {
      return false;
    }
    return true;
  }
}

Esta classe contempla os três métodos que toda DAO deve realizar: conexão com o banco, ajuste da tabela (que no MongoDB é chamada de Coleção) correta através do tipo definido na Enum criada e desconexão com o banco. A classe de implementação para Aluno (AlunoDAO.java) possui a seguinte codificação:

package dao;

import java.util.ArrayList;
import java.util.List;
import com.mongodb.client.MongoCursor;
import org.bson.Document;

import to.Aluno;

public class AlunoDAO extends DAO {

  private Aluno aluno;

  public Aluno getAluno() {
    return aluno;
  }

  public void setAluno(Aluno aluno) {
    this.aluno = aluno;
  }

  public int getInserir() {
    if (conectar()) {
      setColecao(TipoColecao.ALUNO);
      Document doc = new Document("nome", aluno.getNome())
        .append("nota", aluno.getNota());
      col.insertOne(doc);
      desconectar();
      return 1;      
    }
    return 0;
  }

  public List getObter() {
    List lista = new ArrayList();
    if (conectar()) {
      setColecao(TipoColecao.ALUNO);
      MongoCursor cursor = col.find().iterator();
      Document doc;
      while (cursor.hasNext()) {
        doc = cursor.next();
        Aluno al = new Aluno(doc.getString("nome"), doc.getInteger("nota").intValue());
        lista.add(al);
      }
      cursor.close();
      desconectar();  
    }
    return lista;
  }
}

Basicamente, é criado um objeto da TO referente a Aluno com a implementação do seus métodos padrão GET/SET e mais dois métodos (observe que ambos são do padrão GET - isso é obrigatório para a chamada padrão da JSP) o primeiro realiza a inclusão do registro no banco e o segundo a busca de uma lista de objetos TO contendo os alunos já cadastrados.

Tudo pronto, agora basta iniciar o TomCat e obter o resultado. Como teste realize a parte dedicada a Professor e note como é fácil trabalhar com JSP e o MongoDB em uma Aplicação Web multi camadas sem ter que complicar muito.

Obrigado e até a próxima
Fernando Anselmo

Saiba mais →

Arduino - Olá Mundo

A Internet das Coisas, ou IoT como é conhecida, surgiu graças ao baixo preço das placas programadas. Atualmente com menos de R$ 50,00 é possível comprar uma (algo impensável a alguns anos atrás) e o preço vem caindo. Duas placas são as mais famosas Raspberry (que está mais para um computador) e Arduino.

O Arduino é uma placa microcontroladora baseada na ATmega328 e por seu baixo preço é ideal para realizar experimentos de eletrônica e ótima para os iniciantes. O que pretendo mostrar em alguns artigos é como integrar projetos IoT, porém devemos entender algumas coisas básicas antes, ou seja, preciso realizar um Olá Mundo.

A ligação Arduino/Computador é feita através de um cabo USB, mas antes é necessário instalar um aplicativo feito em Java para criar e enviar os programas para a placa. No Ubuntu isso é feito da seguinte forma:

1. Devemos adicionar o repositório

$ sudo apt-add-repository ppa:ubuntu-desktop/ubuntu-make 
$ sudo apt-get update

2. Instalar o programa

$ sudo apt-get install ubuntu-make
$ sudo umake ide arduino 

Agora já podemos criar um projeto para testar. O primeiro passo é montar o circuito que vamos trabalhar. Os materiais necessários são:

• Arduino Uno R3
• Placa protoboard
• Dois fios de cobre
• Resistor de 220 amp. (+/- 5% - Vermelho, Vermelho, Marrom)
• LED (633 nm)

Para a montagem basta seguir o seguinte esquema:

Dica, a perna mais curta do Led é na mesma coluna do resistor que é ligado na D13 (Digital 13) e a mais longa na linha da conexão GND do Arduino. O segundo passo é criar o programa. Acesse o aplicativo Arduino no dash e digite a seguinte codificação:

/* 
Testar LED
*/
void setup(){
  pinMode(13, OUTPUT); // Configurar a porta D13.
}
void loop(){
  digitalWrite(13, HIGH); // Ligar a saída D13
  delay(1000);            // Esperar um segundo
  digitalWrite(13, LOW);  // Desligar a saída D13
  delay(1000);            // Esperar um segundo
}

O método void setup() só será chamado uma única vez e será utilizado para configurar a porta de saída. O método void loop() é executado indefinidamente, uma porta GND de alimentação está ligada ao resistor que por sua vez ligada ao LED e este a saída D13. Imagine isso como um interruptor de luz, uma vez desligado a energia deixa de fluir.

O último passo é enviar o programa para a placa. Conecte-a ao computador através do cabo USB, agora acesse o programa novamente e no menu principal selecione "Tools | Board" verifique se a placa correta está marcada. Ainda no menu principal selecione "Tools | Serial Port" verifique se a porta correta está marcada (no meu caso foi a /dev/ttyACM0).

Agora é só clicar no segundo ícone (Update) e o programa será transferido para a placa (dica: os leds da placa TX/RX acenderão e apagarão). Uma vez que o programa entrar em ação você verá o LED acender, esperar 1 segundo, apagar, esperar 1 segundo e repetir isso indefinidamente.

Basicamente é assim que sempre trabalhamos com o Arduino com a criação de projetos físicos e lógicos. E essa é a ideia maravilhosa desse novo mundo IoT.

Obrigado e até a próxima
Fernando Anselmo

Saiba mais →

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:

• Template RES para o LaTeX
• Modelo do Currículo no LaTeX
• Template para Linha do Tempo no xMind
• Meu Currículo

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

Saiba mais →

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.

Baixar o Projeto do CoffeShop v2

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

Saiba mais →

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

Saiba mais →