‘CSS’

“O código que escrevemos tem muito pouco impacto sobre as pessoas”

March 13th, 2010

As palavras que vemos no título desse post são do mestre Carlos Brando, especialista em Ruby on Rails. Carlos publicou em seu blog um post polêmico, lançando a seguinte pergunta no início de seu texto “Quer se tornar um programador de sucesso? Pare de escrever código”.

Brando contesta alguns programadores que focam demais no código e esquecem o usuário. “O problema é que a maior parte dos programadores se preocupam demais com o código. Passam horas e mais horas tentando criar o algoritmo perfeito. Porém se esquecem que o melhor código do mundo é inútil se ninguém utilizar o software que o contém.”

No final, sugere que o programador deixe de focar apenas no código, participando mais ativamente de comunidades, realizando palestras e melhorando suas habilidades sociais. Sobre isso Brando diz “Não escreva apenas código. Estude, escreva e fale mais sobre código”

O que Brando diz é bastante pertinente. E podemos trazer isso para o campo do Web Design. A questão é: afinal, trabalhamos com quem? Apenas com máquinas? Não, a finalidade do nosso trabalho serão sempre as pessoas. Não são máquinas, mas seres humanos.

O sucesso de sites e softwares mora justamente na interação com as pessoas. Basta observar os sites, aplicativos e serviços que são sucesso no mundo. O orkut surgiu como uma grande novidade. Porém toda aquela tecnologia já existia, principalmente as comunidades, que nada mais são que fóruns com pouquíssimos recursos se comparados com outros fóruns que temos por aí. Mas se tornou sucesso, graças a forma que o site “conversa” com o usuário, uma aliança de design, tecnologia e comunicação.

E o twitter? Existe alguma tecnologia nova e tão especial rodando nele? Nada mais que uma página com textinhos de poucos caracteres, que mais parece um mural de recados, os comentários de um blog, um RSS ou um chat altamente simples. Não há nada de novo em sua tecnologia mas há sim na sua comunicação com o usuário. O formato escolhido, o processo de postagem e interação dos usuários, sua forma simples de operar, tudo isso fez dele um sucesso.

O MSN Messenger, agora Windows Live Messenger, é um caso clássico de sucesso de comunicação com o usuário. Desbancou o reinado do ICQ graças a uma foto e um enter. Antigamente não era possível colocar uma fotinha junto ao nosso contato de ICQ. Além disso para enviar uma mensagem era necessário clicar com o ponteiro do mouse no botão “enviar”. Bastou a Microsoft incluir a possibilidade de colocar uma foto do usuário e apenas teclar “enter” para enviar a mensagem que a migração do ICQ para o MSN ocorreu em massa. Um caso clássico do formato de comunicação exercendo papel fundamental no sucesso de um software. Acredito que foi iso que Carlos Brando quis dizer, pouco interessa se o código do ICQ era melhor construído que o do MSN, o que importa é que o MSN se comunicou melhor com o usuário do que o ICQ.

Para mim programador ou web designer de sucesso é aquele que se comunica melhor com o seu cliente, com o cliente dos seus clientes e com seus colegas de trabalho, focando seu trabalho nas pessoas. Criar um bom código é fundamental para um programador ser chamado de programador assim como criar um bom design é requisito básico para um web designer ser chamado de web designer. O que irá diferenciar esses profissionais dos demais sempre será no formato de comunicação que escolherem na criação de seus trabalhos.

O foco é: gente. Gente de verdade.

Para o alto e Avante!

FONTE: http://www.brunoavila.com.br/avante/mercado/o-codigo-que-escrevemos-tem-muito-pouco-impacto-sobre-as-pessoas.html

Como adicionar sombra utilizando CSS

October 7th, 2009

Você sempre quis saber como colocar uma sombra numa imagem, utilizando apenas CSS? Saiba através do Dinamic Drive, que já foi inclusive indicado aqui no Avante,

Na realidade você pode colocar sombras não só em imagens mas em caixinhas também. Para saber como fazer essa proeza, basta clicar aqui.

Para o alto e Avante!

FONTE: http://www.brunoavila.com.br/avante/css/como-adicionar-sombra-utilizando-css.html

O nome das cores HTML

October 4th, 2009

Você sabia que as cores html possui nomes? É sim, cada cor hexadecimal tem seu nome e que funciona em qualquer navegador. Por exemplo, ao invés de você colocar color: #00FA9A coloque color: MediumSpringGreen que vai dar no mesmo. Para você saber todos os nomes e decorá-los assim como você decorou toda a tabuada, clique aqui e veja toda a lista.

PORÉM, se você quiser que seu site seja validado pelo W3C, seguindo os padrões, saiba que apenas as cores a seguir são validadas utilizando seus nomes: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, e yellow.

Para o alto e Avante!

Bordas Arredondadas com CSS

October 4th, 2009

bordasarredondadascomcss

Quer fazer aquelas bordinhas arredondadas, dando uma diferenciada naquela caixinha de destaque, utilizando CSS? Então conheça essa solução bem simples, o Spiffy Corners, que dá o CSS prontinho pra você fazer suas bordas arredondadas.

Clique aqui para testar.

CSS3: Conheça os novos efeitos do CSS

October 4th, 2009

Você já imaginou colocar efeito de fade nas cores do link? Colocar mútiplas imagens de background? Criar cantos arredondados sem necessidade de bg, só no CSS? Pois isso tudo já existe, na nova versão do CSS 3.

No vídeo abaixo você poderá ver na prática algumas novidades do CSS que só não está popularizado ainda pois nem todos os navegadores suportam essa nova versão. Mas isso é questão de tempo. Então dê uma olhadinha no vídeo para ver o que lhe espera. O vídeo é em inglês mas se você não sabe inglês não tem problema, o que importa é ver o amigo do vídeo programando e botando o bicho pra rodar. Só no visual você irá captar a mensagem.

Nesse site você irá encontrar informações e exemplos de outros efeitos do novo CSS. Divirta-se!

98 Estilos de Tabela em CSS

October 2nd, 2009

98estilosdetabelaemcss

Tenho certeza que esse vai para o seu favoritos. Se você procura fazer uma tabela bonitinha em sua página ( tablelessmaníacos, estou falando de tabela mesmo hein ;) ) agora isso não será mais problema.

Apresento a vocês 98 estilos diferentes de construção de tabelas, de diferentes cores e tipos. Basta clicar, visualizar e pegar o código. Simples, não?

Para visualizar os 98 estilos, clique aqui.

Para o alto e Avante!

FONTE: http://www.brunoavila.com.br/avante/css/98-estilos-de-tabela-em-css.html

Como obter compatibilidade entre diferentes navegadores web?

September 4th, 2009

Uma tarefa bem chata, cá pra nós, para todo webdesigner é deixar o site compatível com vários navegadores, O site está redondinho no Firefox mas no Internet Explorer 6 e no Safari, o site está totalmente torto. Ai ai ai.

Para lhe ajudar, aqui estão dicas que são fundamentais para tornar nosso site compatível com vários navegadores. Esta dica vem do australiano Antony Short que fez um resumo de algumas dicas básicas para evitar problemas no momento de conceber um site e evitar o mal funcionamento entre os diferentes navegadores:

1. Utilize sempre tipo rigoroso de documento (DOCTYPE strict) que cumpram a norma HTML / CSS

2. Utilize sempre um “reset” no início de seu css

3. Use -moz-opacity: 0.99; sobre elementos de texto para limpar e renderizar no Firefox, e text-shadow: #000 0 0 0 no Safari.

4. Nunca redimensionar imagens em HTML ou CSS

5. Checar rendereização de fontes em cada navegador. Não utilize a fonte Lucida

6. Tamanho do texto como % no body e em ao longo da folha de estilo.

7. Todos os divs que são flutuantes, deve incluir: display: inline; e overflow: hidden;

8. Os containers devem ter: overflow: auto

9. Não use seletores fantasia CSS3

10. Não usar PNG’s transparentes, a menos que tenha colocado alpha.