Area Criações - Web e Design - Home

Conheça Ruby On Rails

2009-07-07T19:43:00Z

Alguns dias atrás conclui o treinamento de uma turma de Ruby On Rails na e-Genial, foi um curso bem bacana. Mas percebi que no início do curso muita gente nunca tinha ouvido falar o que era Rails e nem o que era Ruby.

E realmente não existe muito material em português (nem em Inglês) atualizado que apresente a tecnologia e o que aprender sobre estas ferramentas pode agregar no seu dia a dia.

Então conversei com o pessoal da e-Genial sobre uma palestra para preencher esta lacuna, explicando o que é Ruby on Rails e qual o seu papel no desenvolvimento web atual.

Uma palestra ideal para quem nunca teve contato nem com Ruby e nem com Rails, mas deseja saber por onde começar e porque estas tecnologias são tão faladas atualmente.

Então se você é desenvolvedor em outra linguagem ou webdesigner, não perca tempo e marque na sua agenda o dia 18-07-09 as 14:00.

O evento será gratuito, pelo Treina Tom. Então basta acessar o link abaixo no dia marcado as 14:00 e entrar no sistema. Não é necessário nada além de uma conexão banda larga e o flashplayer instalado.

http://www.treinatom.com.br/pt/eventos

Git e Textmate

2009-07-07T19:42:00Z

Pequena dica rápida para que utiliza Textmate e Git no Mac.

Em meu terminal bash eu defino o Textmate como editor padrão, porém se você faz isto, não basta definir em seu .bash_profile como abaixo:

export EDITOR=/usr/bin/mate

Você também precisa definir isto na configuração do GIT, executando o comando abaixo:

git config --global core.editor "mate -w"

Agora toda vez que o git chamar o TextMate ele vai esperar até que o Textmate seja fechado para prosseguir. Desta forma você pode agora utilizar os comandos git commit e git commit—amend para definir as mensagens dos seus commits sem nenhum problema.

Boa solução para acabar com o IE6 e IE7

2009-07-01T17:15:00Z

Todos sabem que o navegador Internet Explorer 6 é um software desatualizado e ter que manter o suporte a esta ferramenta regredi a qualidade a um nível absurdo.

Também e bem conhecido que o Internet Explorer 7 está mais para uma atualização do IE6 do que realmente uma solução. Tendo em vista a perda de espaço para os navegadores inteligentes (Firefox, Safari, Chrome e Opera) a Microsoft voltou a investir em seu navegador lançando o Internet Explorer 8 (Microsoft tem mostrado que prefere manter o monopólio custe o que custar , ao invés de prover uma boa experiência de usuário e abocanhar clientes por este motivo)

O Internet Explorer 8 resolve uma certa quantidade de problemas que o IE6 e IE7 possuem, e como criadores de conteúdo para web, o que temos que fazer é parar de dar suporte a estes navegadores. Deixar de lado os hacks e gambiarras que temos que fazer para suportar esta falta de consideração com os usuários.

A melhor forma que encontramos para não precisar mais suportar este lixo é dizer ao usuário que ele precisa atualizar o navegador para versão mais atual (ao invés de tentar dizer a ele que precisa mudar de navegador como Firefox ou Safari).

É mais ou menos algo semelhante ao que a Adobe faz quando novas versões do Flash são lançadas. Porém ao contrário da Adobe a Microsoft não provê uma forma padrão de se fazer isto, então encontrei a solução abaixo que é perfeita:

Nada mais que um script que exibe uma barra semelhante a do IE6 e IE7 dizendo ao visitante do site que ele deve atualizar seu navegador.

Veja a solução aqui

Este fim de semana vou incorporar isto na grande maioria dos sites de meus clientes, e espero que você também faça o mesmo.

Guia de Design de Interface da Apple

2009-06-29T16:15:00Z

No site da Apple, em Apple Human Interface Guidelines, existe um excelente manual sobre a filosofia e psicologia por trás da interface Mac OsX.

No site da Apple, em Apple Human Interface Guidelines, existe um excelente manual sobre a filosofia e psicologia por trás da interface Mac OsX (dica do Fábio Vedovelli no Twitter).

São apresentadas concepções, princípios e considerações que você pode usar para criar um excelente produto ou software que forneca uma interface intuitiva e atraente, como acontece com a Apple.

O guia explica também como incorporar uma boa interface levando em consideração seu Design, os processos de decisão e como envolver os usuários em todo o processo de criação. O arquivo em pdf também está disponível no site.

IMPORTANTE: Proteste rápido, Microsoft insiste em nos tapear

2009-06-24T12:39:00Z

Durante anos brigamos com um navegador cheio de bugs e fora dos padrões, o que nos custa milhares em horas de trabalho para deixar tudo compatível com o Internet Explorer 6. Quem sai mais prejudicado? Os visitantes, por terem um serviço medíocre por limitações de compatibilidade!

O problema é que a Microsoft não aprende e está trazendo o mesmo problema para o Outlook (o atual já é um pouco assim), eles confirmaram os planos de usar a engine do Word para páginas HTML ao invés de usar Webstandard.

Então será impossível fazer até um layout simples para newsletters funcionar de forma compatível com vários clientes de email.

Participe do protesto abaixo postando em seus twitters (texto retirado do site (http://fixoutlook.org/):

“Microsoft have just confirmed they plan on using the crippled Word rendering engine to display HTML emails in Outlook 2010.

This means for the next 5 years your email designs will need tables for layout, have no support for CSS like float and position and no background images. Not to mention the long list of bugs and quirks that break the simplest of layouts.

Outlook 2010 is still in beta and Microsoft have confirmed they want to hear your feedback on this decision. It’s time for the email marketing and design community to rally together and encourage Microsoft to embrace web standards before it’s too late.

What’s the best way to do that? Twitter of course.

Visit fixoutlook.org to see how you can help and what the community is saying right now.”

Site Scaffold

2009-06-22T17:00:00Z

Ok, existem centenas de CMS e no mundo Rails existem alguns muito bons como o Radiant, BrowserCMS e AdvaCMS porém, todos estes CMS’s acabam sendo mais complexos do que o necessário para um projeto onde teremos apenas um catálogo de produtos e gerência de novidades.

Não faz sentido tentar ensinar um cliente que poderá criar grupos de usuários, tags, que poderá organizar as páginas em sub-páginas e etc. Simplesmente ele não vai entender, não vai usar e logo não vai gostar do nosso serviço.

Por este motivo prefiro criar o backend da forma mais simples possível, o problema é que sempre fico criando várias coisas que são praticamente padrão em todos os projetos.

Trabalhamos muito criando websites, e muitas vezes estes projetos não são voltados para empresas de TI ou que tenham um setor de TI, então também desenvolvemos um backend simples para os próprios clientes administrarem o conteúdo dos sites.

Por este motivo prefiro criar o backend da forma mais simples possível, o problema é que sempre fico criando várias coisas que são praticamente padrão em todos os projetos.

Coisas como

posts (ou notícias), onde o cliente vai inserir noticias com fotos e paginação.
produtos, um catalógo listado em forma de grid com mais detalhes do produto e fotos (semelhante a exibição de um Submarino.com).
login, logout, signup, layout do admin.
formulário de contato.

Então a bastante tempo (deve ter uns 2 anos) criei um plugin chamado SiteScaffold com o único objetivo de gerar as coisas acima, um generator simples do Rails para cada um dos tópicos acima.

Nada complexo, mas algo com que eu possa dar continuidade e desenvolver mais sobre o que foi gerado.

O resultado disto está em http://github.com/danielvlopes/site_scaffold/tree/master

E para gerar cada coisa basta:

script/generate admin_base
script/generate posts
script/generate contact_form
script/generate products_catalog

Dependendo do generator chamado (não se preocupe, ao executar cada um é exibido os passos a serem seguidos) é adicionado as abaixo dependências :

restful_authentication paper_clip will_paginate jrails validatable

Como uso RSpec em todos os meus projeto não inseri nada sobre testes no plugin, pois acho que deve ser feito em Test::Unit pois nem todos usam Rspec mas Test::Unit pode ser executado dentro do Rspec. Então se alguém se habilitar a criar os test cases para o que é gerado pelo plugin seria ótimo.

Também pretendo alterar de restful authentication para authlogic, então qualquer ajuda neste ponto também será bem útil.

Tooltip Helper para Rails sem Javascript

2009-06-16T15:10:00Z

Basicamente é possivel fazer um tooltip sem nada de Javascript, apenas com um link (ou qualquer outra tag que aceite hover) com uma outra tag com display:none (dizendo que não deve ser exibida) que é alterado no hover para display:block.

É muito comum precisarmos exibir explicativos, legendas ou qualquer tipo de informação extra mas sem poluir o layout do site ou sistema.

Para este problema tão recorrente temos as tooltips, que todos já devem conhecer.

Em desenvolvimento web existem centenas de formas de criar tooltips, quase todas atreladas a algum tipo de javascript. Como por exemplo:

Só que muitas vezes não quero ter que usar Javascript para isto, quero só uma tag que seja exibida com rollover. E isto é bem simples de se fazer:

A solução acima é uma adaptação do proposto no site CSS Globe, e basicamente é um link (ou qualquer outra tag que aceite hover) com uma outra tag (no caso um span) com display:none (dizendo que não deve ser exibida) que é alterado no hover para display:block. Simples.

Também acrescentei um onclick=”return false;” no link, para garantir que se o usuário clicar no elemento a url não mude.

Simples mas querendo ou não temos que escrever um pouco, e como programador bom é programador preguiçoso, criamos um helper no Rails para poupar tempo:

Normalmente coloco o método acima no arquivo application_helper.rb do Rails, pois vou usar este helper em toda a minha aplicação.

Feito isto podemos agora chamar em nossas views do Rails desta forma:

  <%= help_tooltip "<b>ex.: Lipsum Design LTDA</b><br/>Este nome ..." %>

O restuldo seria algo como a imagem abaixo:

Para concluir, um spec em Rspec de como garantir que este método funcione da forma correta:

Vale lembrar que se você usar algum Framework de Javascript como Jquery, seria bem simples acrescentar efeitos através da classe tip.

Image Spark - Colecione suas imagens online!

2009-06-04T19:39:00Z

O site Image Spark é uma ferramenta super criativa, que nos ajuda a colecionar e organizar nossas imagens online.

Ele é perfeito para agrupar referências de Design por projeto ou qualquer tema que desejarmos, além das imagens poderem ser compartilhadas entre os usuários.

Podemos capturar telas e salvar imagens online, sem precisar encher o computador de arquivos, pastas e mais pastas… Para cada nova conta é atribuído 1GB de espaço de armazenamento e dois moodboards.

O legal é baixar as ferramentas…

O site Image Spark é uma ferramenta super criativa, que nos ajuda a colecionar e organizar nossas imagens online.

Ele é perfeito para agrupar referências de Design por projeto ou qualquer tema que desejarmos, além das imagens poderem ser compartilhadas entre os usuários.

O legal é baixar as ferramentas…

Plugin para Firefox:

Existem algumas excepções à regra, mas em geral, na maioria das imagens dos sites, você pode clicar com o botão direito do mouse e salvar direto na sua biblioteca. É simples e rápido.

Aplicativo pra Mac:

Captura de screenshots.

Uploader para Navegador:

Você não precisa abrir navegador para fazer upload das imagens de seu Desktop.

Consultoria na vida real

2009-05-27T14:10:00Z

Já pensaram como seria absurdo se transportássemos para o dia-a-dia o tipo de relacionamento entre clientes que vemos com regularidade no mundo de consultoria (seja em design, desenvolvimento, etc) ?

Seria mais ou menos como o video abaixo:

Dica de Jamis Golick pelo Twitter

TabsHelper para menus em Rails

2009-05-26T14:01:00Z

Sempre tenho a necessidade de menus com abas ou menus baseados em tags ul e li, como já mostramos aqui , este tipo de menu é simples de se fazer temos um retorno bem bacana.

Porém seria muito bom que dentro do Rails conseguíssemos controlar qual deve ser marcada com base nos controllers e actions, ao contrário de ter que ficar definindo em todas as views qual é a aba corrente.

E para isto, eu encontrei um plugin do Rafael Lima que é muito bacana, porém ele já acompanhava um CSS e imagens além de algumas coisas que não batiam com as minha necessidades. Então como tudo está no github, tratei de fazer meu “fork”: http://github.com/danielvlopes/tabs_helper/tree/master e adaptar para os meu projetos, e já á algum tempo venho usando este plugin para qualquer tipo de menu em meus projetos html.

Mas este fim de semana precisei de ícones para as abas e menus verticais do Cifras (ainda não falamos deste projeto, mas logo farei um post explicando tudo e apresentando o produto) e resolvi alterar bastante o código do plugin para que ele aceitasse também blocos, e se comportando praticamente igual ao link_to do Rails.

Então, para quem precisar de menus em Rails e queira controlar isto via controllers veja abaixo como é simples:

Controller

class DashboardController < ApplicationController
  current_tab :mydashboard

  ...

end

View

ERB code

<% tabs do |tab| %>
  <%= tab.account 'Account', account_path, :style => 'float: right' %>
  <%= tab.users 'Users', users_path, :style => 'float: right' %>
  <%= tab.mydashboard 'Dashboard', '/' %>
  <%= tab.projects 'Projects', projects_path %>
<% end %>

Resultado HTML

 <ul id="tabs">
   <li><a href="/accounts">Account</a></li>
   <li><a href="/users">Users</a></li>
   <li><a href="/" class="current">Dashboard</a></li>
   <li><a href="/projects">Projects</a></li>    
 </ul>

E se você quiser utilizar ícones ou mais textos com tags html dentro de cada aba:

<% tabs do |tab| %>
  <% tab.account account_path do %>
    <%= image_tag "account.jpg" /> Accounts
  <% end %>
  <% tab.users users_path do %>
    <%= image_tag "user.jpg" /> Users
  <% end %>
  <% tab.posts posts_path do %>
    <%= image_tag "posts.jpg" /> Posts
  <% end %>
<% end %>

Download

Então quem quiser usar o plugin, aqui segue o link do repositório no github: http://github.com/danielvlopes/tabs_helper/tree/master

Ajude o Ruby One Click Installer

2009-05-22T16:07:00Z

Pessoal, tenho certeza que muita gente que le o blog ou que esteja fazendo o curso comigo ainda utiliza Windows. Estas pessoas que ainda, estão presos ao Windows por algum motivo e pretendem aprender Rails ou já começaram os estudos devem agradecimento a um projeto: Ruby One Click Installer.

Este projeto é o Ruby portado para o Windows e só temos esta opção graças ao argentino Luis Lavena, que a anos desenvolve este trabalho quase que sozinho. E nos últimos dias ele abriu uma campanha para levantar fundos para o projeto, para que estes fundo sejam aplicados no próprio projeto, através de um novo website e trabalho de design.

Então, para ajudar na divulgação desta campanha eu tomei a liberdade de copiar este post do Akita, que por si só é bem explicativo (leia abaixo):

Akita

Eu tenho tentado, na medida do possível- windows-part-2, ajudar a crescente comunidade rubista que, por diversas razões, vivem em um mundo Windows.

Infelizmente, existem muito poucos desenvolvedores – incluindo dentro da própria comunidade Windows – ajudando nisso. Atualmente existe um Ruby estável e usável em produção no Windows graças ao esforço, quase individual, do Luis Lavena, o argentino que mantém o excelente projeto One-Click Ruby Installer

Porém ele precisa de ajuda. Por isso ele começou uma campanha para angariar fundos ou qualquer tipo de colaboração para melhorar a visibilidade do projeto, criando um novo website, um novo wiki e ele começou primeiro no blog dele, depois na lista ruby-talk# e, finalmente, numa página para doações que você pode acessar por aqui

Vamos ajudar, twite sobre a campanha, espalhem por blogs, doem. Nenhuma quantia é pequena demais.

Rails Helpers que não vivo sem!

2009-05-17T18:44:00Z

Em desenvolvimento Rails é uma obrigação abstrair a lógica de nossas views, por este motivo usamos helpers para sempre manter as views o mais “clean” possível e ainda aumentar a nossa produtividade.

No meu dia a dia possuo vários helpers que não vivo sem, helpers que são comuns em todos os meus projetos e considero essênciais.

Então gostaria de compartilhar com vocês estes métodos:

Estes são os mais comuns que servem para qualquer projeto independente do assunto, então gostaria de saber quais helpers vocês utilizam, compartilhe com agente e post os links de seus gist’s abaixo :D

Promoção de Livro: Ruby on Rails em Português

2009-05-09T14:43:00Z

Olá pessoal, recebi ontém o email abaixo do Ruby Learning. Para quem não conhece, é um site voltado a estudos e cursos direcionados a Ruby. Já fiz um curso lá e achei bem bacana.

Então como o email é uma promoção voltada ao público brasileiro, pedi autorização do Satish Talim para traduzir e divulgar aqui no blog:

“Nós temos o prazer de anunciar que temos agendado uma promoção do livro “Ruby on Rails” ( pela primeira vez no RubyLearning.org em Português) junto com o autor (Rodrigo Jardim) dos dias 19 a 21 de Maio de 2009.

Mais detalhes:

Promoção do livro: Ruby on Rails

Período: 19 a 21 de Maio 2009
Detalhes
Os registros já iniciaram. Qualquer pessoa interessada em programação Ruby pode entrar. É GRATUITO. Use a chave de matrícula: BPCE101.
Cadastre-se aqui.
Você pode começar postando questões relacionadas ao livro (em Português), imediatamente.
Por favor também repasse estas informações a todos os seus amigos interessados que falam Português, e se você estiver no Twitter por favor tweet sobre este evento.

Você pode ganhar uma copia impressa do livro se postar questões inteligentes relacionadas aos tópicos do livro no forum relevant. Por que esperar? É gratuito. Cadastre-se agora

A promoção anterior, “Wicked Cool Ruby Scripts’”, foi um grande sucesso.

Obrigado/Satish”

Botões de Logout

2009-05-05T14:12:00Z

Por que encerrar uma sessão (ou fazer logout) é tão importante? Alguns motivos são óbvios, como se você estiver em uma máquina que será utilizada por mais de uma pessoa, então você corre sérios riscos se não fizer logout… outros não tão óbvios para alguns, mas não fazer logout pode abrir um série de possíveis problemas de segurança.

Parece que ultimamente os desenvolvedores tem se preocupado muito com o login e nada com o logout. Resolvi escrever este post pois duas vezes esta semana, me vi perdido, procurando o botão para encerrar minha sessão de algum serviço.

Por exemplo, um ataque possível caso você não faça logout (trecho copiado do guia de segurança do Ruby On Rails):

Bob navega por um fórum de discussão e visualiza uma mensagem criada por um hacker onde existe um elemento HTML de imagem forjado. O elemento referencia um comando na aplicação de gerenciamento de projetos de Bob, ao invés de um arquivo de imagem.
<img src="http://www.webapp.com/project/1/destroy"/>
A sessão de Bob em www.webapp.com ainda está ativa, porque ele não fez seu logout alguns minutos atrás.
Por acessar a mensagem, o navegador encontra uma tag de imagem. Ele tenta carregar a imagem suspeita a partir de www.webapp.com. Como explicado anteriormente, ele também enviará o cookie com id de sessão válido.
A aplicação web em www.webapp.com verifica a informação do usuário no respectivo hash de sessão e destroy o projeto com ID 1. Ele então retorna a página com o resultado da operação, o que é um resultado inesperado para o navegador, logo ele não irá exibir a imagem.
Bob não percebe o ataque — Mas alguns dias mais tarde ele percebe que o projeto número um se foi.”

Existem várias formas de atacar um usuário se ele ainda estiver logado e se o sistema (website) não prover formas de segurança para ataques neste estilo. Para desenvolvedores Rails, por padrão já estaremos protegidos do ataque acima por causa da linha protect_from_forgery :secret => “123456789012345678901234567890…” no ApplicationController.

Mas como vou ter certeza que todos os sistemas adotam este tipo de proteção?! Não vou saber, então, como usuário, sempre faço logout. E estes motivos e vários outros me parecem uma boa justificativa para botões de logout mais visíveis.

Veja alguns exemplos abaixo:

Primeiro temos o registro.br, que o link de finalizar sessão está misturado com uma série de outros links e todos da mesma cor. Você dificilmente conseguirá encontrar o link com uma rápida “passada de olhos”. Pior, se você estiver em uma outra página vai ter que voltar para a página inicial pois o link de finalizar sessão não está disponível em todas as páginas.

O segundo exemplo é o site das Americanas, se você não quiser deixar seu usuário exposto, vai ter que navegar para página meu cadastro e só depois vai ter que procurar pela frase “Olá fulano (se você for outra pessoa, Clique Aqui!)” . Em momento algum você acha a palavra sair ou encerrar e para complicar mais ainda a frase está toda escrita da mesma cor como se Clique Aqui! não fosse um link.

E para fechar os exemplos, o site da Magazine Luiza. Se você efetuar login e esquecer marcado o checkbox de lembrar usuário, prepare-se para a caça ao tesouro. Voltando a página inicial você verá seu nome no topo direito, bacana, é o local normal para botões de sair mas você só encontra uma frase bem vindo. Não existe nenhuma palavra tipo sair, encerrar ou até mesmo o “troque de usuário”, então você tem que ser mágico para saber que o seu nome de usuário é um link e ao clicar nele abrirá um pop-up que vai te explicar porque você não consegue “deslogar” e dentro deste pop-up tem um botão de logout (é, em inglês mesmo) que parece que foi esquecido por ali.

Estes são apenas alguns do exemplos que encontro todos os dias, mas para nós (desenvolvedores e designers) isto é um agravante em nossos produtos e devemos sempre tomar cuidado com este tipo de situação. Não deixe seus usuários suscetíveis a erros banais ou até um ataque malicioso.

Se você acha que um botão vermelho e grande vai atrapalhar o layout então ao menos coloque um link disponível em todas as páginas no topo direito (que é o local já convencionado para esta ação) e utilize palavras como SAIR ou FECHAR SESSÃO.

Processo de desenvolvimento de marca

2009-04-29T18:25:00Z

Complicado, ainda não tive tempo de escrever sobres as idéias, que estão sem acumulando, para posts aqui no blog. Mas quero deixar aqui um link muito bacana que não sabe o trabalho que da criar uma logomarca conceitual.

Aproveito para dar os parabéns ao pessoal da Abduzeedo, quem sempre faz um trabalho excelente.

Veja o trabalho AQUI