Antes de continuar você pode querer ler Mito – Usuários não utilizam a barra de rolagem e 5 Melhores Galerias de sites para Inspiração.

O site Íonz encontrou uma forma bem criativa de abastecer seu banco de dados com o perfil dos navegantes. Fizeram um sistema onde você responde à algumas perguntas, baseado nas respostas o sistema gera um infográfico traçando seu perfil, destacando suas preferências e mostrando a dos demais internautas.

Depois do infográfico gerado você tem a opção de personalizar e salvar como Papel de Parede do seu computador. Experimente, bem legal.

Post from: Dica1

Transforme seu Perfil em um Infográfico

Antes de continuar você pode querer ler Uma análise da caixa de busca do portal ESPN Brasil e Cuidado para não estar traumatizando seus usuários.

*Acima da dobra é um termo referente ao conteúdo localizado na metade superior da primeira página de um jornal.  É comumente utilizado na web para descrever a área que você vê em um site antes de ter que rolar a página.

Neste excelente artigo The myth of the page fold: evidence from user testing mostra que foram feitas mais de 800 seções de testes no período de 6 anos constatando que as pessoas não tem problema em utilizar a rolagem do site.

Assim como no jornal onde o objetivo é que ele seja todo lido e não apenas o conteúdo acima da dobra, o site deve ser planejado para que o usuário seja atraído a navegar por toda a página.

Sendo assim uma das coisas que pode definir se o usuário vai rolar ou não a página é o posicionamento do conteúdo. No texto citado acima o autor mostra que menos conteúdo acima da dobra incentiva o usuário rolar a página em busca de mais  conteúdo.

Outra prática também citada no texto é posicionar o conteúdo abaixo da dobra de forma que parte dele apareça na área visível da página.

Um ótimo exemplo é o site da 37 Signals, o conteúdo está bem distribuído em uma longa página e a cada etapa da rolagem o usuário têm próximo de se a possibilidade de acessar as páginas dos produtos caso seja convencido.

Outro detalhe muito interessante é que no rodapé foram posicionadas as mesmas opções que estão no topo do site, poupando o usuário em ter que rolar até o início da página para acessar os produtos.

Alguns posts sobre o assunto que vale a pena conferir:
Myth #3: People don’t scroll
Scrolling and Attention
Life Below 600px
Screen Resolution and Page Layout

Post from: Dica1

Mito – Usuários não utilizam a barra de rolagem

Passeia a analisar alguns sites em busca de possíveis erros ou acertos.
Como apontar o erro dos outros é fácil, a vitima da vez é o portal da ESPN Brasil.

Conversando pelo Gtalk com meu caro colega @jroqueweb grande conhecedor de PHP, Java Script e afins, um ótimo profissional (aproveitando para fazer um merchan dele, “risos”), ele mim indicou um blog que até então não havia conhecido: Porra Usabilidade. Um dos primeiros post deste blog comenta sobre a caixa de busca do ESPN.

Tenha em mente ao decorrer deste texto a primeira lei de Steve Krug: “Não me Faça Pensar”.

Descontente com a informação do blog e com minha dificuldade, mostrei o site para algumas pessoas, entre homens e mulheres (9 exatamente) dei um termo e pedi que elas pesquisassem no portal em questão.

O resultado foi exatamente o que esperava:

3 dos voluntários desistiram depois de passar alguns instantes subindo e descendo a página em busca de onde começar a pesquisar.
1 indicou a região onde procuraria o campo de pesquisa, mas não identificou a existência dele.
1 encontrou, seguindo a lógica de que aquele campo era o único que ela poderia digitar algo.
4 encontraram, mas demoraram muito, muito além do normal.

Agora tenho a certeza de que há algo errado.

Vou apontar quatro coisas que claramente contribuem para o fracasso desta caixa de pesquisa.

1 - O campo para digitar o termo está sem bordas.
2 - A barra “/” antes da palavra é incomum em campos de pesquisa.
3 - O campo de pesquisa está posicionado em um local que comumente é utilizado para colocar banners.
4 - Não há nenhuma sinalização clara que ali é um campo de pesquisa, como um icone de uma “lupa” ou as palavras “pesquisar”, “buscar”.

Depois de apontar os erros vamos às possíveis soluções.

Primeiro adicionei uma borda. Utilizei dois tons de cores para testar:

Troquei a palavra “agora” por  ”buscar” e “pesquisar”:

Agora no contexto para visualizar melhor as alterações:

Como diz no post Search: Visible and Simple o campo de pesquisa deve ser visível e simples.

Comentem mim chamando de maluco e cego, ou dizendo que não estou equivocado.

Post from: Dica1

Uma análise da caixa de busca do portal ESPN Brasil

Dentre vários artigos relacionados a usabilidade também conhecida como UX (User Experience), os que falam dos chamados Call to Action Buttons (Botões de chama a ação) têm uma atenção especial.

Minha intenção neste texto não é falar especificamente sobre os Botões, quem tiver curiosidade ou interesse sobre o assunto segue os links de meia dúzia de artigos bem interessantes.

Como disse e sugere o titulo, minha intenção não é falar sobre os Botões, mas sim falar sobre o botão. Estava a visitar os links que meus seletivos followings twittam, quando deparei com este, que apelidei de (Call to Action Button Big) Grande botão de chamada a ação, não resisti e resolvi escrever este rápido post.

Já tinha visto vários botões grandes, mas este superou todos eles. Tive que reduzir bastante a imagem para caber no post.

Para visualizar no tamanho original basta clicar na imagem ou ir até o site http://www.logolicia.com.br/

Uma coisa curiosa é que o Botão é tão grande que acaba tirando a atenção do usuário que está a utilizar o formulário, que deve ser preenchido antes de clicar no Big Button.

Faça sua analise sobre o Grande botão e deixe seu comentário.

Post from: Dica1

Grande Botão de Chamada a ação

Selecionei 10 posts entre os que li esta semana, ou melhor de segunda-feira até hoje (quinta feira). São textos muito interessantes, espero que tenha utilidade para vocês assim como tiveram para mim.

Solve any CSS problem in 3 minutes (or less)

Como o titulo sugere: Resolva qualquer problema CSS em 3 minutos (ou menos). Neste post do blog Five Finger Coding da uma dica muito útil no dia dia de quem monta layouts em CSS e HTML e vai te livrar de muitas dores de cabeça, digo isso por experiência própria, utilizo esta simples técnica desde que comecei a Montar Layouts e ela tem me auxiliado sempre.

The Secret Behind Great Designs: A Young Web Designer’s View

Esse foi um dos posts que mais gostei.
Todos os Web Designers querem criar sites bonitos que se destaquem entre os damais e que sejam notados por outras pessoas.

“As web designers, we all want to create beautiful websites that get noticed. We want our designs to look great and stand out from among the rest. So how do we get the experience and the skills needed to create amazing designs? In this article, we will let you in on a little secret that can greatly impact your path to becoming a great designer.”

Como criar o blog que a sua empresa precisa

Artigo do Blog Gestão Feminina dando algumas dicas de como criar um blog para a sua empresa.

“Muitos empresários ainda não descobriram, mas aquela área “notícias” no menu do site da sua empresa está cada vez mais perdendo a importância.”

Stopping Shopping Cart Abandonment

A taxa de abandono de carrinho de compras é mais de 50%.
Erin Richey Jo, mostra o que pode estar interferindo no processo fazendo com que os clientes desistam de finalizar a compra.

Good Call-to-Action Buttons

O que você pode fazer para tornar suas chamadas à ação mais eficazes?
“The call-to-action button” ou no bom português: Os botões de chamada à ação, são peças importantes no layout e dependo da localização, cor, tamanho e estilo podem nos proporcionar experiências boas ou ruins.
O autor cita um exemplo em que este conjunto de fatores utilizados de maneira correta, aumentou em 11% a quantidade de clicks.

25 Examples of Convincing Call-to-Action Buttons

Uma analise de 25 Exemplos de botões bem sucedidos.

Getting Real: Copywriting is interface design

O autor diz que Copywriting é o jeito como você rotula um botão, o jeito que você explica alguma coisa, o jeito que você rotula o conteudo.

“Is it “There are new messages: 5″ or “There are 5 new messages” or is it “5″ or “five” or “messages” or “posts”? All of this matters.”

“É “Há novas mensagens: 5″ ou “Há 5 novas mensagens” ou é “5″ ou “cinco” ou “mensagens” ou “posts”? Tudo isso importa.”

Hiring tip

Este post assim como o titulo, é bem curto, 6 linhas apenas.
Se os candidatos a vaga de emprego estiverem em geral as mesmas qualificações e especializações, dê preferência a contratar o melhor escritor.

How To Successfully Educate Your Clients On Web Development

“Alguma vez você já teve um cliente que queria uma logo maior em seu site? Talvez um logo feito em Flash, com uma terra girando e brilhos!?
Neste post você vai encontrar algumas dicas de como contornar situações como estas.

The Poetics Of Coding

Inspirado no slogan do WordPress Código é poesia “Code Is Poetry”, o autor mostra como escrever código é bem semelhante a escrever uma poesia.

Post from: Dica1

10 posts para aumentar o conhecimento

O Ruby on rails é um framework adotado por muitos profissionais que utilizam praticas ágeis, então ao buscar referências sobre Ruby on Rails, consequentemente você acaba sendo fisgado pelo uso de metodologias ágeis a exemplo do Scrum e XP  e técnicas que lhe ajudam à otimizar seu tempo e ser mais produtivo.

Uma destas descobertas foi a Técnica Pomodoro (The Pomodoro Techique). Sei que já existe vários artigos falando sobre está técnica, citarei vários aqui, mas também vou deixar minha contribuição.

O que é o Pomodoro Techinique?

O Pomodoro Techinique é um método de gerenciamento de tempo criado pelo Italiano Francesco Cirillo nos anos 80 e adotada pelas equipes profissionais nos anos 90.

Fracesco não estava contente com a forma que gerenciava seu tempo, não conseguia concentrar-se muito tempo em uma tarefa, então decidiu desafiar-se e ver até onde iria seus poderes de concentração. Para isso utilizou basicamente um time de cozinha em forma de tomate, daí veio o nome Pomodoro que é tomate em Italiano. Além do pomodoro, um papel e um lápis.

Como funciona?

A técnica é muito simples, por isso está fazendo tanto sucesso.
Na folha de papel ou em uma planilha você vai anotar todas as tarefas que deverão ser executadas naquele dia, em ordem de prioridades..

Escolha uma tarefa e ajuste seu time para 25 minutos. Se não tiver um conômetro físico ou se preferir, existe vários programinhas para esta finalidade, vou citar dois bem interessantes o PomoDo e o Focus Booster.

Trabalhe na tarefa até o timer despertar então em sua planilha ou folha de papel marque um X ao lado da tarefa.

Descanse 5 minutos, assim completando um pomodoro que é formado por 25 minutos de execução + 5 minutos de descanso. Nestes 5 minutos aproveite para levantar, beber água, tomar um café ou conferir seu twitter e seus e-mails.

Continuem fazendo este ciclo de 25 e 5 minutos até completar a tarefa. Após completa-la risque da lista e inicie uma nova tarefa.

Depois de 4 pomodoros faça um intervalo maior, sugiro 25 minutos, mas pode ser maior ou menor.

E as interrupções?

Não vivemos sozinhos em um mundo isolado, então as interrupções e as distrações são constantes.

Regra numero 1 – Um pomodoro é indivisível, sempre terá 25 minutos de duração.

Se você começa um pomodoro e por distração ou por intervenções externas passa a executar outra tarefa, seja atender um telefonema, olhar o e-mail o twitter entre outras distrações, este pomodoro é anulado, sendo assim você deve marcar um traço (_) no lugar do X, zerar o conômetro e concentrar-se novamente na tarefa.

Outra dica bacana, que esta dando trabalho para por em pratica é:
Quando o timer sinalizar o fim dos 25 minutos, pare de trabalhar mesmo que ache que dá para completar a tarefa trabalhando por mais alguns minutos.

O que ganho com isso?

Basicamente produtividade e controle do tempo.
Você vai passar a ter relatórios de quanto tempo gasta para executar determinada tarefa, se pode diminuir este tempo, quais as interrupções mais frequentes, além de com a prática eliminar distrações que desperdiçam tempo.

Como utilizo o Pomodoro

Não têm muito tempo que utilizo a Técnica, mas já estou vendo resultados na produtividade.

Para aplicar a técnica utilizo o Focus Booster para contar o tempo e uma planilha para listar as tarefas, pomodoros executados e interrupções.

Com o botão direito do mouse, adiciono uma nota sobre a interrupção.

Lista de Tarefas

Mais detalhes sobre a técnica você encontra em:

The Pomodoro Technique – http://www.pomodorotechnique.com/

The Pomodoro Technique: A produtividade que vem do tomate - http://migre.me/wcoM

Seja produtivo consumindo tomates – http://migre.me/wcq8

Pomodoro Technique: Você usa da maneira correta? - http://migre.me/wcr2

Técnica Pomodoro (video) – http://migre.me/wcs3

Técnica Pomodoro: organize-se e tenha foco – http://migre.me/wcuC

Post from: Dica1

Otimize seu Tempo comendo tomates – The Pomodoro Technique

Esta denominação remete à situação ocorrida num jogo de Rugby, na qual uma disputa de bola é vencida por um dos times, aquele que faz maior força para “empurrar” o outro time para longe da bola do jogo, ou seja, o conceito de que o time que trabalha junto, coordenado e com objetivo comum resulta em meta alcançada. Metodologia ágil: Scrum

Scrum é:

Um Framework de processo Ágil onde há entrega regular e frequente de software de alta qualidade.

Processo iterativo e incremental para desenvolvimento de qualquer produto ou gerenciamento de qualquer trabalho…  SCRUM Experience – http://migre.me/bRyO

Grandes empresas internacionais que utilizam Scrum:

Nokia, Google, HP, Amazon.com, Philips, Siemens, Borland, Intel, Yahoo, Microsoft, Canon, Xerox.

Empresas Brasileiras:

Globo.com, Abril, UOL, Powerlogic, Locaweb, Cesar, Ci&T.

Ciclo do Scrum

O Scrum é composto por:

Product Backlog – Lista de tudo que precisa ser feito no sistema

• Requisitos do produto
• Lista do que Fazer
• Sempre mudando…

Product Owner

• Gerência Product Backlog
• Aceita/Regeita resultados
• Define/Prioriza Funcionalidades

Sprint planning

• O Time seleciona Estórias para compor o Sprint e as quebra em Tarefas
• O Product Owner descreve as funcionalidades de maior prioridade para a equipe

Sprint – Período em que as tarefas selecionadas no Sprint planning são executadas

• Grande Velocidade em tempo curto
• Ciclos de 30 dias

Scrum Team

• Responsável por entregar Soluções
• Composto por 5 a 9 pessoas
• Auto-gerenciável
• Multi-Funcional

Scrum Master – Guardião das práticas do Scrum

• Remove Obstaculos
• Garante Colaboração

Daily Srum

• Reunião de 15 minutos, em pé
• O time responde as seguintes perguntas:
  • O que fez Ontem?
  • O que fará hoje?
  • Têm algum obstaculo?

Sprint Review

• Apresentação dos Resultados do Sprint

Sprint Retrospective

• O que funcionou bem
• O que pode melhorar

Para finalizar,  está  imagem  que encontrei no Blog do Abu, ilustra bem o ciclo do Srcum:

“Construa com qualidade, não tente aferir qualidade após o produto pronto.” - Visão Àgil

Post from: Dica1

SCRUM – O que é isso?

Minha vontade sempre foi trabalhar com Web, para isso tenho me preparado, virando a noite, vasculhando páginas na internet em busca de conteúdo relevante para poder estudar. Sempre busquei oportunidades de pôr meus conhecimentos em prática e quando tenho oportunidade participo de eventos relacionados a área.

No último evento que fui em Salvador o EDTED conheci Alexandre da Perfil Virtual, Agência Web de Feira de Santana. Depois de conversarmos, trocarmos ideias, trocamos contato e um tempo depois ele mim chamou para um bate papo e hoje sou mais um membro do time da Perfil Virtual, daí o título “Agora Sou Perfil”.

Espero retribuir a confiança apresentando resultados que venham contribuir para o crescimento da Perfil. Venho acumulando conhecimento ao londo deste período, porém ainda tenho muito o que aprender, mas para mim vai ser um prazer.

Confesso que não sentirei nenhuma saudade dos fôros em que entrei para passar o cabeamento das instalações, das vezes em que sai completamente sujo dos locais impregnados de poeira, e dos postes em que já subi para passar fio, porém sou muito grato a todos que compõe a Digitel Telecom; patrão Manoel, aos técnicos; Renildo, Leandro, Carlos e outros que já passaram pela equipe. Obrigado a todos por estarem sempre a disposição, sanando duvidas e ajudando quando necessário. Espero ter contribuído muito ao longo deste ano.

Que 2010 seja de muito trabalho e conquistas e que sonhos e projetos sejam realizados.

Post from: Dica1

Agora sou Perfil

por Rafael Lopes

No post Trabalhando com paginação – Mislav-will_paginate noruby on rails do blog de Diego Alvarez Nogueira ensina como instalar e utilizar a gem.

O problema é que o resultado, em relação ao aspecto visual não é agradável. Melhor, é bem simples.

Então lembrei de algo que tinha utilizado quando coloquei a paginação aqui no Dica1.

No Blog Mis Algoritmos têm um post Some styles for your pagination com vários Estilos CSS para paginação. Só precisei adicionar o arquivo CSS do Estilo escolhido ao projeto. Agora o aspecto ficou bem mais amigavél.

Caso queira modificar alguma coisa é só modificar o CSS.

Post from: Dica1

Personalizando a Paginação no Rails

Durante este período que passei sumido, estava utilizando meu tempo para pesquisar e estudar. Já que trabalho durante o dia, mim resta apenas a noite.  Atualmente estou estudando “Ruby on Rails” e “Metodologias Ágeis”.

por Juliana Vanelli

Já tinha visto falar de Ruby e do framework Rails, mas ainda não tinha dado a devida atenção, até quando mais uma vez bateu a curiosidade e voltei a pesquisar, foi ai que encontrei vários materiais bem interessantes que mim deixaram mais curioso ainda.

Não vou utilizar este post para falar de Ruby nem de Ruby on Rails, mas caso não conheçam a linguagem e tenham curiosidade de conhecer, recomendo alguns blogs e sites que estão me ajudando nos estudos: nomedojogo.com por Carlos Brando, akitaonrails.com por Fabio Akita (Ambos são grandes difusores da linguagem aqui no Brasil), Ruby Brasil e Rails Guides. Nestes sites e blogs vocês vão encontrar muitas outras referencias sobre o assunto.

Recentemente Carlos Brando do blog Nome do Jogo, lançou um novo site para armazenar vídeos de palestras e screecasts sobre Ruby on Rails. Carlos Brando abriu espaço para quem quiser contribuir indicando qualquer material sobre Ruby, Rails ou qualquer outra tecnologia relacionada a desenvolvimento.

Incentivado por isso entrei em contato com ele e agora estou postando vídeos no site. Vídeos relacionados a Desenvolvimento com foco em Metodologias Ágeis e Ruby on Rails. Atualmente estou com 12 videos postados entre Screencasts e Palestras.

Para quem está começando com Ruby on Rails é recomendável dar uma passada por lá e conferir os vídeos. O endereço é videos.nomedojogo.com.

Em breve estarei falando sobre minhas experiências com Ruby on Rails aqui no Dica1. Até mais!

Post from: Dica1

Vídeos sobre Ruby on Rails e Metodologias Ágeis