Vaga Desenvolvedor Ruby on Rails Senior

Posted in Ruby on Rails on December 28th, 2011 by Vinicius Ebersol – Be the first to comment

A Connectere AgroGestão está procurando um desenvolvedor Ruby on Rails Senior. Confira os dados da vaga abaixo:

Requisitos:

  • Ruby e RubyonRails (>= 3.0)
  • Experiência no desenvolvimento de sistemas empresariais (não somente sites institucionais e blogs) é desejado
  • Curso superior e fluência na língua inglesa são diferenciais apreciados
  • Bons conhecimentos em git, SQL, html, haml, javascript (jQuery)

Função:

  • Desenvolvedor RoR Pleno/Sênior
  • Participação ativa na definição do sistema
  • Desenvolvimento das regras de negócio (métodos na camada model)
  • Desenvolvimento de testes unitários

Contratação:

  • Contratação como PJ
  • Remuneração estabelecida em comum acordo e de acordo com a experiência e conhecimentos demonstrados
  • Trabalho remoto c/ dedicação exclusiva

Entrar em contato com Marcelo Lageman (rh@connectere.agr.br)

Callback para CSS3 transitions

Posted in CSS3, HTML5, Javascript on January 5th, 2011 by Vinicius Ebersol – Be the first to comment

Para pessoas que estão acostumadas com o método animate do jQuery, que tem um callback, trabalhar com CSS3 pode ser um pouco complicado. Aqui vai uma dica rápida pra adicionar callbacks às suas transições.

Existe um método que tem nomes diferentes para Mozilla, webkit e Opera, respectivamente:

  • transitionend
  • webKitTransitionEnd
  • oTransitionEnd
element.addEventListener(
    'transitionend', //depende do browser (listado acima)
    function( event ) {
        alert( "Finished transition!" );
    },
    false
);

Bug com a tag video no iPad

Posted in HTML5, Javascript on December 30th, 2010 by Vinicius Ebersol – Be the first to comment

Como muitos que trabalham com web, tenho trabalhado bastante em desenvolvimento para dispositivos móveis, a maioria dos projetos para iPad e iPhone. Nesse projeto em especial, estamos desenvolvendo uma versão HTML5 de um site de um cliente famoso. A geração do conteúdo é toda feita através de uma biblioteca estruturada em componentes e um desses componentes é um player de video em HTML cujo controle do video é todo feito através de outra biblioteca javascript que eu desenvolvi.

Durante o desenvolvimento, encontrei um bug muito estranho que ocorria somente no iPad. A princípio pensei que era um problema na geração dos HTML’s da biblioteca e fiquei alguns dias procurando o tal do problema, e nada…

A solução veio de um lampejo ao ver o XML que utilizamos para carregar o conteúdo. O XML tem todos os dados do vídeo, inclusive as duas versões de vídeo nos formatos suportados (ogg e mp4) pelos diferentes browsers que suportam a tag <video>. Ele montava o vídeo da seguinte forma:

<video width="650" height="250" data-quality="normal" poster="../_img/poster.jpg" preload="nopreload">
<source src="../_media/demo.ogg"></source>
<source src="../_media/demo.mp4"></source>
Your browser doesn't support this video.
</video>

No entanto, todos os dispositivos da Apple, vêm com um codec de vídeo diferente dos demais browsers, MPEG 4. Na tabela abaixo é mais fácil de entender a compatibilidade:

Fonte: http://www.w3schools.com/html5/html5_video.asp

No hora que eu vi o XML me dei conta que o video no formato ogg estava antes do video mp4 no código, simplesmente troquei de posição e funcionou, como você pode ver abaixo:

<video width="650" height="250" data-quality="normal" poster="../_img/poster.jpg" preload="nopreload">
<source src="../_media/demo.mp4"></source>
<source src="../_media/demo.ogg"></source>
Your browser doesn't support this video.
</video>

E essa foi a solução pra todos os meus problemas…

Vaga para programador de interface

Posted in Off-topic on October 27th, 2010 by Vinicius Ebersol – Be the first to comment

A CONRAD CAINE, agência digital com escritórios em Munich, Pelotas e Buenos Aires procura dois programadores de interface para integrar a equipe de Pelotas.

Responsabilidades

  • Codificar páginas que funcionem perfeitamente em diversos browsers, de uma maneira fiel ao projeto original (funcionalmente e visualmente);
  • Codificar interfaces interativas utilizando JavaScript/Ajax;
  • Pesquisar novas técnicas de desenvolvimento;
  • Aplicar com sucesso técnicas de SEO;
  • Escrever código limpo e bem organizado;

Qualificações

  • Experiência na utilização das bibliotecas JavaScript mais conhecidas no mercado;
  • Conhecimento acerca das técnicas de SEO;
  • Habilidade para desenvolver websites com um alto padrão de usabilidade / acessibilidade;
  • Fluência nos padrões W3C (HTML/XHTML/CSS);
  • Pró-ativo e autodidata;
  • Rápido na solução de bugs;
  • Habilidade para entregar estimativas corretas;
  • Inglês intermediário/avançado;
  • Experiência com Photoshop/Fireworks;

Currículos devem ser enviados para jobs.pelotas@conrad-caine.com, com o título “Programador de Interface”

Substituir tag por dados do banco utilizando Ruby on Rails

Posted in Ruby on Rails on May 19th, 2010 by Vinicius Ebersol – 1 Comment

Muitas vezes procuramos dar mais independência ao cliente, possibilitando o mínimo de intervenção possível em uma aplicação, por menor que seja. Hoje pela manhã, enquanto pesquisava algum CMS simples em Rails, encontrei uma funcionalidade muito interessante no Radiant, que permite ao usuário adicionar tags. Ele mostra uma popup com tags disponíveis que são métodos como: escape_html, author, date. Estes métodos são próprios do CMS e não era exatamente o que eu estava procurando no momento.

O que eu pensei era permitir que um usuário comum pudesse facilmente exibir um dado contido dentro do modelo Post. Por exemplo, você deseja pôr a data da última atualização dos dados. Seu objeto Post tem um campo chamado updated_at. Para pôr isso no texto a idéia é que você utilize uma tag especial que será substituída pelo dado capturado do banco. Foi pensando nisso e baseado nas tags do Radiant que eu fiz o código abaixo:

class Post < ActiveRecord::Base
  belongs_to :category
  validates_presence_of :name, :title, :body, :permalink, :user_id, :category_id

  # Method to replace your special tag.
  def self.replace_special_tags(object, field)
    text = eval('object.'+field)
    if !text.blank?
      tags = self.get_tags(text)
      if !tags.blank?
        tags.each do |tag|
          text = text.gsub(tag.to_s, self.get_param(tag, object))
        end
      end
    end
    return text
  end

  # After catch your tags, pass the tag and object that you need to use.
  def self.get_param(tag, object)
    pattern = /[^<r:].*[^ \/>]/
    param = tag.to_s[pattern]
    replace = object.respond_to?(param.split('.').first) ? eval('object.'+param) : nil
    if !replace.blank?
      return replace.to_s
    else
      return '<!-- wrong field -->'
    end
  end

  # Get all special tags on text
  def self.get_tags(text)
    pattern = /(<r:[a-z\.]+ \/>)/
    if !text.scan(pattern).blank?
      text.scan(pattern)
    end
  end
end

O modelo acima permite exibir dados direto do banco ao passar um objeto e o respectivo campo de texto que contém as tags especiais. Vejamos como funciona na prática:

Post.replace_special_tags(@post, 'body')

Assim, todas as tags especiais que eu adicionar ao campo body serão substituídas pelo campo correspondente no objeto @post. Vejamos um exemplo do nosso objeto:


>> @post
=> #<Post id: 1, name: "Minha página de teste", title: "Titulo da minha página de teste", body: "<p>Ah!!</p>\r\n\r\n<ul>\r\n  <li><strong>Nome da categori...", permalink: "minha-pagina-de-teste", active: false, public: nil, user_id: 1, category_id: 26, created_at: "2010-05-19 21:39:52", updated_at: "2010-05-19 21:39:52">

Nesse caso, o post pertence a uma categoria:


>> @post.category
=> #<Category id: 26, name: "Minha categoria de teste", permalink: "minha-categoria-de-teste", parent_id: nil, created_at: "2010-05-19 22:09:16", updated_at: "2010-05-19 22:09:16">

Portanto, você pode utilizar, por exemplo:

  • <r:title />
  • <r:user_id /> * em breve, um relacionamento poderá permitir acesso aos dados do usuário. Mas cuidado com as permissões aqui. É muito importante limitar o uso deste recurso.
  • <r:category.name />
  • <r:category.permalink />

Na prática, seu campo body ser assim:

<p>My replace tags test</p>
<dl>
  <dt>My category name:</dt>
  <dd><r:category.name /></dd>
  <dt>My category permalink:</dt>
  <dd><r:category.permalink /></dd>
  <dt>My post permalink:</dt>
  <dd><r:permalink /></dd>
</dl>
<div class="breadcrumb">
  <a href="/categories/<r:category.permalink>"><span><r:category.name></span></a> |
  <a  href="/categories/<r:category.permalink>/post/<r:permalink>"><span><r:name></span></a>
</div>

Acima estão somente alguns exemplos de dados que você pode utilizar. Como o método que eu criei não limita a utilização de campos, tudo que você chamar do objeto @post será exibido, se existir. O interessante a partir daqui é pensar em criar uma lista dos dados “acessíveis” para permitir chamar somente estes, tornando a utilização deste método muito mais segura.

Ps.: Desculpem pelo título, porém não encontrei nada que pudesse descrever isso em poucas palavras e da forma correta. Recebo sugestões.

jQuery TOOLS

Posted in Javascript on January 21st, 2010 by Vinicius Ebersol – Be the first to comment

jQuery TOOLS é uma biblioteca super completa que facilita muito a criação de tarefas hoje comuns, veja as demos dos recursos dessa biblioteca:

  • Tabs;
  • Tooltips;
  • Overlay – Screenlocker para popups;
  • Expose – Serve para destacar elementos da página;
  • Scrollable – entre outras coisas serve para fazer galerias de imagens bem legais;
  • Flash embed – uma espécide de SWF Object que já vem inclusa e funciona muito bem com o player de vídeo dos mesmos autores dessa biblioteca;

É possível combinar esses recursos como você pode ver aqui. Ou ainda existe uma demonstração de como integrar o player de vídeo em flash deles com o jQuery TOOLS.

Flowplayer

O Flowplayer é um player de vídeo em flash desenvolvido pelos mesmos autores do jQuery TOOLS. Veja aqui algumas demos do player em ação.

drails – Dojo + Rails

Posted in Javascript, Plugins, Ruby on Rails on September 15th, 2009 by Vinicius Ebersol – Be the first to comment

drails

Dica rápida para quem se interessou no post anterior sobre Dojo. Eu pesquisei e encontrei um plugin que substitui os helpers do Rails para utilizar Dojo ao invés de Prototype. É o drails.

A instalação é simples:

# drails relies on the dojo-pkg gem.  Installing this gem can sometimes take a while
gem install dojo-pkg

cd my_rails_app
script/plugin install git://github.com/foobarfighter/drails.git

Para maiores informações acesse o README do plugin no github.

Abra sua caixa de ferramentas com Dojo

Posted in AJAX, Javascript on September 10th, 2009 by Vinicius Ebersol – Be the first to comment

dojo toolkit logo

Antes de tudo, Dojo não é só mais um framework Javascript como jQuery, Prototype e Mootols. Em muitos casos esses facilitam o desenvolvimento, no entanto, quando a questão é desempenho, somente agilidade no processo de desenvolvimento não é uma boa escolha.

Desenvolver aplicações web de grande porte significa preocupar-se com desempenho não só do lado do servidor, o cliente (alvo principal) deve ser peça fundamental. Incluir dezenas de arquivos javascript com funções que muitas vezes sequer serão usadas, causa um aumento de tráfego pouco significante se analisarmos as coisas de forma isolada, mas imagine um excesso de 10kb a cada request feita por milhões de usuários, isso pode gerar um excesso de gigabytes por mês dependendo do número de acessos mensais, causando uma lentidão nas respostas do servidor.

Acerca do desempenho no lado do cliente

Um teste realizado neste blog mostrou resultados surpreendentes relacionando frameworks e browsers. Na média, o Dojo é o mais rápido de todos os frameworks.

speed-compersion-graph

Sobre o tráfego

Muitos desenvolvedores usam jQuery e Prototype, inclusive eu. O jQuery tem todo o seu core em um único arquivo, já o prototype tem arquivos separados que você inclui dependendo de suas necessidades. Para esse segundo caso, creio que você não fará um header diferente para cada página que criar, portanto, na maioria das vezes inluímos todos os arquivos que irão usar em toda aplicação.

A facilidade do Dojo nesse aspecto está no seu maior segredinho: ele é dividido em dezenas de partes que você inclui somente de acordo com a sua necessidade utilizando um médoto próprio do dojo.

dojo.require("dojo.NodeList-fx");

A primeira vista pode parecer semelhante ao prototype, porém, se você analizar o código que está contido em cada arquivo vai entender. São em média 50 a 100 linhas incluíndo comentários e quebras de linha por arquivo (na versão não reduzida do dojo). Comparando com o arquivo effects.js do Prototype (que contém aproximadamente 1200 linhas) é algo realmente significativo.

Dijit: O diferencial do Dojo

O melhor do Dojo com certeza é a sua biblioteca de widgets, chamada Dijit. Com ela você pode adicionar elementos à sua aplicação tornando a experiência do usuário muito satisfatória. Existem soluções semelhantes para jQuery e Prototype, porém, você terá que ir em busca das soluções que necessita e contar com a sorte para que o desenvolvedor do plugin tenha desenvolvido algo que irá funcionar corretamente e suprir as suas necessidades.

O mais importante de tudo é que o Dijit é internacionalizado e em muitos casos, acessível. Veja aqui algumas features do Dijit.

DojoX

O DojoX é uma área de desenvolvimento de extensões, uma espécie de incubadora de novas idéias que mais tarde podem estar disponíveis na ferramenta principal ou serem removidas se não obtiverem o sucesso esperado. Podem não ser internacionalizadas e não ter a mesma qualidade dos widgets do Dijit, porém, são sempre coisas novas que podem ser úteis na hora do aperto.

Conclusão

Utilizar Dojo é uma revisão de conceitos, mas como todo bom desenvolvedor dedicar um pouco de tempo ao aprendendizado da “filosofia” do Dojo pode torná-lo um desenvolvedor versátil e independente de tecnologias, pois pode ocorrer de uma oportunidade de emprego solicitar experiências com esta e(ou) aquela ferramenta de acordo com a aplicação ou ainda as determinações do cliente.

De volta ao WordPress

Posted in Off-topic on July 12th, 2009 by Vinicius Ebersol – Be the first to comment

Há uns meses eu já fiz essa migração do Mephisto para o WordPress, mas a falta de tempo não permitiu que eu a finalizasse. A princípio eu iria tentar desenvolver algo parecido com o WordPress em Rails, mas não deu. Eu encontrei muitos problemas com o Mephisto e tive dificuldades com o controle de meus arquivos enviados, etc… São bugs que fui resolvendo aos poucos, mas eu não posso me dar ao luxo de resolver todos os bugs na atual situação em que me encontro.

A escolha pelo WordPress foi simples: ele está anos luz à frente do Mephisto, embora o esse seja muito promissor e tem muito a crescer. Com o WordPress é possível adicionar outras funcionalidades facilmente além de recursos que já são nativos do próprio. E o mais importante, “pingback” de posts.

Eu tenho uma série de dicas legais que pretendo publicar em breve. Então, aguardem que estou de volta.

Dicas para otimizar o Redmine

Posted in Ruby on Rails on February 25th, 2009 by Vinicius Ebersol – 5 Comments

A cada atualização do Redmine tenho notado as mudanças e quão significante elas são. O Redmine ainda nem chegou a versão 1.0 e na minha opinião já é significativamente melhor que alguns gerenciadores de projeto. Por exemplo, compará-lo com o Jira (licensa de $4,800 anuais) é piada. Redmine é software livre e muito mais completo.

Em sua versão padrão ele é muito bom, mas imagine que existem muitos plugins para turbinar o seu Redmine. Segue abaixo uma lista de plugins extraída da wiki do Redmine:

Plugin list

  • BotsFilterPlugin previne URLs contra indexação de mecanismos de busca.
  • Bulk Time Entry adiciona múltiplas entradas de tempo de uma vez só.
  • Budget é um plugin para gerenciar o conjunto de resultados de cada projecto, automaticamente calcula alguns indicadores de desempenho.
  • Collapse transforma a barra lateral padrão do Redmine para uma barra expansível.
  • Customer gerencia informações básicas do cliente e analisa os projetos deste cliente.
  • Embedded permite enviar arquivos HTML (ex.: documentação auto-gerada, resultados de testes) em seu projeto.
  • Exception Handler habilita o Redmine a enviar e-mails quando algum erro ou excessão ocorrer.
  • ezFAQ gerenciador de FAQ para redmine.
  • ezLibrarian cria um módulo que serve para a gestão de seus livros em sua empresa.
  • Google Analytics inclui de um modo simples o Google Analytics no Redmine.
  • Google Calendar integra o Redmine com o Google Calendar.
  • Project Scores permite ao usuário atribuir uma pontuação ao projeto, incluindo muitos critéiros de análise.
  • RD formatter permite formatar texto no estilo Ruby Doc
  • Question plugin que permite comunicação entre usuários nas tarefas.
  • Simple CI
  • Stuff To Do Permite o usuário atribuir a ordem das tarefas atribuídas a ele.
  • System Notification habilitao Administrador a enviar notificações por email para usuários recem logados.
  • Timesheet plugin para análise de horas trabalhadas de cada usuário, por projeto.

Encontre mais plugins no GitHub.

Dica: Siga o tutorial de como criar um plugin para o Redmine.

Como instalar um plugin

1. Se você está usando a versão 0.7.x, você precisa instalar o Rails engines plugin (certifique-se de que esteja usando a versão 2.0.2 do Rails). A partir da versão 0.8.0 o Rails engines plugin já está incluso no Redmine, então não precisa seguir este passo.

ruby script/plugin install http://svn.rails-engines.org/engines/tags/rel_2.0.0/
mv vendor/plugins/rel_2.0.0 vendor/plugins/engines

2. Copie o diretório do plugin para #{RAILS_ROOT}/vendor/plugins

3. Se o plugin requer migração, rode o seguinte comando para atualizar a sua database (faça um backup primeiro).

rake db:migrate_plugins

4. Reinicie o Redmine (siga as instruções de acordo com o servidor que você está usando).