Image Replacement em elementos input

11/02/07

Neste post, expliquei como eu estava querendo aplicar um fundo a elemento button. Eu e o Rapha aqui do UOL descobrimos ontem uma maneira de fazer isso no elemento input.

Olha que fácil. No markup:

<input type="button" value="Um botão" />

E o CSS:

input {
    border: none;
    background: url(http://m.simplesideias.com.br/document-save-as.png) no-repeat;
    content: ""; /* opera */
    display: inline-block; /* opera */
    height: 32px;
    line-height: 0; /* ie */
    text-indent: -9999px;
    width: 32px;
}

O melhor de tudo é que funciona até no Opera, coisa que não tinha conseguido fazer antes! ;)

Veja o resultado nos navegadores IE6 Standalone, IE7, Firefox 2 e Opera 9:

Técnica aplicada no IE6   Técnica aplicada no IE7

Técnica aplicada no Firefox 2   Técnica aplicada no Opera 9

Estatísticas com o plugin TrackMe Stats no Rails

10/02/07

Estou criando um plugin nos meus poucos minutos vagos para gerar as estatísticas de um site feito em Ruby on Rails. Inspirado no Shortstat e Mint, difere-se principalmente pelo fato de não ser em Javascript.

Após instalar o plugin, você só precisará migrar seu banco de dados (são 4 tabelas no total) e colocar o seguinte código no arquivo "application.rb":

class ApplicationController < ActionController::Base
  include TrackMe
  after_filter :analyze
end

O painel de visualização será semelhante ao Netvibes, com o conceito de widgets arrastáveis, divididos em:

  • Visitas
  • Browser
  • Technorati
  • Busca
  • Referrer
  • Páginas
  • Idiomas
  • Países

Se interessou? Então dá uma olhada como está ficando a interface:

TrackMe Stats: Tela de visualização das estatísticas

Lançamento da versão inicial em breve!

Update: Será que vai ter algum louco que vai usar todos esses painéis? Acesse a imagem abaixo para ver.

Lista dos Painéis disponíveis no TrackMe

Detectando o navegador no Rails

28/01/07

Eu tinha um script em PHP que fazia detecção de browser e acabei de portá-lo para Ruby.

Ele é bem simples mas serve muito bem. Para utilizá-lo, basta instanciá-lo da seguinte maneira:

ua = "Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.1) Gecko/20061204 Firefox/2.0.0.1"
browser = Browser.new :user_agent => ua, 
                      :accept_language => 'en-gb'
 
puts browser.ie?            #false
puts browser.opera?         #false
puts browser.safari?        #false
puts browser.mozilla?       #true
puts browser.firefox?       #true
puts browser.linux?         #false
puts browser.windows?       #true
puts browser.mac?           #false
puts browser.platform       #Windows
puts browser.name           #Firefox
puts browser.version        #2
puts browser.full_version   #2.0.0.1
puts browser.language       #English/United Kingdom
puts browser.user_agent     #Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.1) Gecko/20061204 Firefox/2.0.0.1

Você também pode instanciar o objeto passando o "request" como parâmetro:

@browser = Browser.new(:request => request)

Gosto de usá-lo para exibir um trecho específico de informação, da mesma maneira que a Mozilla Foundation faz quando você acessa a página do Firefox, sugerindo o instalador para seu sistema. Você pode fazer algo como:

Pegue o código direto do Subversion.

svn co http://svn.simplesideias.com.br/general/browser/

Update: A classe foi reformulada para deixar mais elegante. ;)