Vinicius Ebersol

jQuery Custom Form Plugin

Vinicius Ebersol — Mon, 07 May 2012 03:07:16 +0000

Um plugin que eu fiz essa semana pra facilitar a vida dos desenvolvedores. Esse plugin não é nenhuma revolução na história, porém tem uma coisa que eu não vi em nenhum outro, ele mantém os formulários acessíveis, sem perder a beleza de um formulário customizado.

Veja a demo: http://vebersol.net/demos/jquery-custom-forms/

Download do plugin no github: https://github.com/vebersol/jQuery-Custom-Forms

Ajax crossdomain crossbrowser

Vinicius Ebersol — Fri, 13 Apr 2012 14:06:20 +0000

O título do link pode parecer feio, mas é isso mesmo. É possível fazer esse tipo de requisição assíncrona usando a função $.ajax do jQuery e o dataType JSONP.

Abaixo um exmplo do que eu fiz para testar. Ajax crossdomain testado inclusive no IE6.

Uma ressalva é importante: Eu usei o YQL que é uma API do Yahoo que retorna um jSON de uma URL qualquer.



    
        Test

jQPlayer – HTML 5 Video Player Plugin para jQuery

Vinicius Ebersol — Tue, 10 Apr 2012 03:59:23 +0000

Há um bom tempo tinha desenvolvido um plugin para jQuery. Consiste em um plugin que facilita a vida do desenvolvedor para criar um video player html 5 de forma fácil e customizável o bastante de modo que permite:

alterar posição de controles;
selecionar os controles você quer ou não exibir;
suporte a legendas em formato srt;
suporte a fullscreen para os broswers que já têm a API fullscreen disponível (atualmente Chrome e Firefox);
customizar classes CSS dos controles gerados pelo plugin;
adicionar botões personalizados (ex.: links ou botões que executam métodos de sua escolha);
possibilidade de adicionar callbacks customizados para eventos padrões de um vídeo (ex.: play, pause, end);

Portanto, para você que precisa de versões mais específicas, de acordo com o cliente, jQPlayer é a melhor opção.

Veja a demo do jQPlayer ou acesse o repositório do jQPlayer no github.

Vaga Desenvolvedor Ruby on Rails Senior

Vinicius Ebersol — Wed, 28 Dec 2011 13:52:41 +0000

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

Vinicius Ebersol — Wed, 05 Jan 2011 12:22:42 +0000

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

Vinicius Ebersol — Thu, 30 Dec 2010 13:46:28 +0000

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 . Ele montava o vídeo da seguinte forma:

Your browser doesn't support this 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:

Your browser doesn't support this video.

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

Vaga para programador de interface

Vinicius Ebersol — Wed, 27 Oct 2010 16:20:28 +0000

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

Vinicius Ebersol — Wed, 19 May 2010 22:46:50 +0000

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 = /[^]/
    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 ''
    end
  end

  # Get all special tags on text
  def self.get_tags(text)
    pattern = /()/
    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 => #Ah!!

\r\n\r\n

\r\n

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

Portanto, você pode utilizar, por exemplo:

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

Na prática, seu campo body ser assim:

My replace tags test

My category name:

My category permalink:

My post permalink:

|

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

Vinicius Ebersol — Thu, 21 Jan 2010 15:42:26 +0000

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

Vinicius Ebersol — Tue, 15 Sep 2009 13:04:54 +0000

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.