Pular para conteúdo 
Зеленый кофе

O autor

Carlos Eduardo de Souza, Front-End Developer & Interface Designer na Coopers Digital Production, dedica seu tempo para o desenvolvimento de uma Web mais acessível. Possui certificado W3C em Mobile (sites e web apps) e HTML5.

Portfolio e blog sobre Web Standards – project.47, de Carlos Eduardo de Souza

Topo 17/05/07

A Web 2.0 está ficando saturada

Lendo este artigo, decidi refletir sobre o que está acontecendo com a Internet atualmente, e tenho de concordar, a [tag]Web 2.0[/tag] vem perdendo seu foco, se comparada com sua “origem”, por assim dizer.

Lembro-me que, inicialmente, os sites enquadrados neste estilo, destacavam-se pela funcionalidade, tanto na parte visual (design mais limpo e agradável, além da usabilidade) quanto na parte interna do site, baseando-se em novas utilizaçőes para tecnologias já existentes, como AJAX, além de outras novas tecnologias, beneficiando o usuário.

Porém, com a difusão do termo e o fato de certas pessoas verem neste “ramo” uma oportunidade de ganhar dinheiro, o termo “Web 2.0” acabou tornando-se um verdadeiro buzzword, e seus fundamentos distorcidos. As aplicaçőes de AJAX viraram sinônimo de efeitos visuais (drag’n drop, por exemplo), o [tag]design[/tag] teve seu fundamento baseado em degrades, reflexos, etc., além da usabilidade, presente, somente, em fontes com tamanho maior do que o convencional.

Claro, sempre há os bons exemplos, como os próprios blogs, originados anteriormente, mas que tiveram seu auge justamente nesta época de mudanças na Internet. Porém, o que podemos fazer para mudar este panorama com a perda de valores e mudança de significado para as bases fundamentais dessa “nova” Web?

  • Como sempre, estudar cada caso, dependendo das necessidades, pois não é necessário utilizar determinado recurso só pelo fato de ser uma tendęncia, mas pela realidade na qual se está contextualizado;
  • Faça seus projetos de acordo com os Web Standards, isso assegurará a qualidade do seu serviço, possibilitando usuários de dispositivos diferentes, além de deficientes terem a oportunidade de acessar seu conteúdo;
  • Bom-senso é a palavra de ordem, não exagere na complexidade ou simplicidade, devido a grande concorręncia, requerendo inovaçőes em seus projetos.

O objetivo deste post é a reflexão sobre o caminho pelo qual estamos passando. Acho que, em certos pontos, as tendęncias estão passando dos limites; então para que devemos nos enquadrar nos padrőes e parecermos iguais a todos?

Topo 16/05/07

WordPress 2.2

Acaba de ser lançada, com atraso, a mais nova versão do [tag]Wordpress[/tag] tendo como codinome “Getz”, em homenagem ao saxofonista Stan Getz. As principais novidades são:

  • Widgets inclusos no código do sistema, antes disponíveis apenas em forma de plugin. Desta forma, os temas-padrão que acompanham o WordPress também terão suporte a este recurso;
  • Suporte completo a Atom, atualizando as especificaçőes do sistema para utilização da versão 1.0 do padrão RSS, além da implementação do Atom Publishing API, complementando a interface XML-RPC;
  • Atualização do sistema de importação do Blogger, adaptado ŕ última versão deste serviço;
  • Proteção para plugins, no momento que se tentar deletar ou desativar algo que possa prejudicar o funcionamento correto do WordPress.

Seguindo recomendaçőes do BlogAjuda, é interessante que sejam desativados todos os plugins antes de realizar a atualização, pois não se trata de um pequeno upgrade, mas de uma mudança na estrutura do sistema e, por isso, é bom tomar certas precauçőes.

Update: já foi disponibilizada a atualização automática do WordPress para quem é assinante da Dreamhost. Para realizar a atualização, basta visitar a seção one-click installs no painel de controle.

Topo 15/05/07

Atualização de segurança para Akismet

Todos os blogueiros (pelo menos aqueles que utilizam WordPress) sabem da importância que o plugin Akismet tem para nos proteger dos ataques de spammers. Centenas de spams já foram detectados e filtrados pelo plugin aqui no project.47, por exemplo.

Recentemente foi detectada uma grave falha de segurança na ferramenta e, portanto, deve ser atualizada. Basta baixá-la neste endereço e trocar pelo arquivo correspondente, na pasta do plugin dentro de /wp-content/plugins/.

Porém esta atualização gerou um novo bug, que não permite o acesso ao plugin pelo painel administrativo do [tag]Wordpress[/tag]. Para corrigir esta falha, basta procurar por esta linha este trecho no akismet.php:

clean_url("$link?page=akismet-admin")

e trocar por:

"$link?page=akismet-admin"

Pronto, seu plugin estará funcionando corretamente e sem o perigo de invasőes por pessoas mal-intencionadas.

Topo 14/05/07

Rollover com imagens

Com a evolução do CSS e da criatividade no desenvolvimento de layouts, alguns efeitos como o rollover de imagens tornaram-se muito comuns. Para aqueles que não sabem, o efeito rollover faz a troca de imagens quando o usuário passa o mouse por determinado elemento em seu site.

É um recurso muito interessante em botőes, ícones, etc., e este post tem como objetivo exemplificar uma maneira fácil e rápida de fazer este efeito. O raciocínio é o seguinte: cria-se um link que tenha largura e altura definidas, com uma imagem de fundo (prevendo os dois estados) que troca de posição quando se passa o mouse por este elemento.

Passo 1: Crie a imagem com os dois “estados” do rollover, ou seja, a imagem do modo normal e, ao seu lado, a imagem com o efeito previsto quando o usuário passa o mouse pelo objeto. No final, é criada uma imagem com a altura desejada para o link e largura correspondente ao dobro, já que os dois estados do botão estão juntos na mesma imagem.

Exemplo de rollover

Passo 2: Faça o [tag]HTML[/tag] para este objeto, por exemplo um link:

<a href="#" id="rollover" title="Exemplo Rollover">Exemplo Rollover</a>

Passo 3: Agora vem a parte interessante. Deve-se estilizar o link desenvolvido anteriormente, via [tag]CSS[/tag], para que este tenha a imagem criada (passo 1) como fundo, além de definir a mudança de posição do fundo durante a passagem do mouse sobre o elemento, criando o efeito rollover:

a#rollover { display: block; width: 150px; height: 30px;
background: url(../images/rollover.gif) no-repeat;
font: bold 1.1em "Trebuchet MS", sans-serif; color: #fff; text-align: center; }
a#rollover:hover { background-position: right; color: #000; }

De acordo com o código CSS acima, defini o link como um elemento block, para que possa ser determinada sua largura, altura e definir a centralização do texto. A largura, como dito anteriormente, deve ser igual ŕ metade da largura da imagem criada no passo 1, pois, obviamente, pretendemos que apareça apenas um estado de cada vez.

Quando o usuário passar o mouse pelo elemento, a posição do fundo se deslocará para a direita, mostrando apenas a parte feita para criar o efeito rollover propriamente dito, além de mudar a cor do texto.

Desta maneira, criamos um efeito rollover de maneira muito fácil e prática, utilizando apenas uma imagem, aproveitando o recurso de posicionamento de fundo via CSS. O interessante é que, por se tratar de somente uma imagem, quando o usuário carregá-la, já terá os dois estados prontos.

Podemos observar que este método é muito vantajoso, pois não utiliza códigos JavaScript, por exemplo, e não depende de duas imagens diferentes, não causando aquela espera indesejável para carregar a segunda imagem, ao passar o mouse pelo elemento criado.

Topo 03/05/07

Gerador de temas para WordPress

Foi lançado um gerador de temas para [tag]Wordpress[/tag] que pode auxiliar, e muito, quem não possui conhecimentos em HTML, CSS, PHP ou JavaScript.

Seu funcionamento é simples: basta preencher um formulário e visualizar sua prévia, no quadro ao lado do mesmo. Após finalizado, é só salvá-lo e enviar para a pasta correspondente, em seu servidor.

Ah, este gerador também suporta os Widgets, recurso muito interessante na criação de menus e estruturação do layout do tema.

Links Randômicos
Meta
Apoio
Créditos
Creative Commons