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 27/03/07

Dicas para melhorar seu CSS: Parte 1

Após certo tempo de aprendizado, conhecendo novas técnicas e, claro, experięncia adquirida em trabalhos de pequeno e grande porte, podemos perceber diferenças entre um [tag]CSS[/tag] bem feito, formatado e prático para manutenção, comparando-o com um CSS feito sem tanta experięncia e, até mesmo, sem aquela malandragem na escrita.

Um exemplo de CSS simples, que não foi planejado para atender as necessidades de qualquer tipo de trabalho, em sua manutenção principalmente:

  
    #menu {
    	float: left;
    	width: 120px;
    	background: #cacaca;
    	margin-left: 10px;
    	margin-bottom: 20px;
    }

    p {
    	margin-bottom: 5px;
    	text-indent: 10px;
    }

    a {
    	text-decoration: none;
    }

    #header {
    	background-image: url(../imagens/header.jpg);
    	background-repeat: no-repeat;
    	background-color: #000;
    }
  

Este é um pequeno exemplo que já pode ilustrar muita coisa. Vou listar algumas ingenuidades do código acima, para elucidar o que pode ser feito para deixar o código menor, mais limpo e prático para manutenção.

Abreviação

Podemos pegar o último item do exemplo acima, para entendermos melhor a questão da abreviação no CSS.

  
    #header {
    	background-image: url(../imagens/header.jpg);
    	background-repeat: no-repeat;
    	background-color: #000;
    }
  

Ao invés de escrevermos desta maneira, poderíamos escrever tudo em uma linha só. Isso não é uma coisa óbvia, portanto tem que ser aprendido através de leitura e bastante prática, com certeza.

Abreviando, esta regra poderia ser re-escrita da forma abaixo:

  
    #header {
    	background: url(../imagens/header.jpg) #000 no-repeat;
    }
  

Simples, não? Assim podemos proceder em diversos casos, tanto em background, como margin, padding, font, e outras propriedades no CSS.

Formatação

Essa é mais uma questão pessoal do que realmente um padrão para escrita do código. Como se pode observar nos códigos acima, cada regra CSS foi escrita em várias linhas, reservando cada linha para uma propriedade, ficando mais fácil de ler. Porém, há uma outra maneira de escrever (a qual utilizo há um bom tempo), que é utilizar uma linha para cada regra inteira, mantendo todas as propriedades juntas, por exemplo:

  
    #menu { float: left; width: 120px; margin: 0 0 20px 10px; background: #cacaca; }
  

No exemplo acima, apliquei a prática da abreviação do código, juntando as medidas de margin, além de manter a regra inteira em apenas uma linha. No começo é um pouco complicado, mas essa prática diminui muito o tamanho do arquivo e facilita a busca de determinada parte de seu código, mostrando mais regras de uma vez só em sua tela.

Aqui termina a primeira parte da série de posts sobre as melhorias que podemos fazer em nosso CSS. Algumas são utilizadas por preferęncia pessoal, mas outras realmente fazem diferença tanto para produção como a manutenção de qualquer projeto, seja de pequeno, médio ou grande porte.

Topo 25/03/07

Novo layout implementado

Como vocęs devem ter reparado, as seçőes Curriculum e Portfolio voltaram ao ar, com algumas novas características, além de manter a estrutura antiga, pois satisfaziam as necessidades a que foram propostas.

Quanto a seção Curriculum, as novidades ficaram por conta de alguns dados novos no texto e inserção de uma foto ao lado, no topo do conteúdo.

Já a seção Portfolio conta com novidades em relação a novos trabalhos, como a descrição do desenvolvimento do novo layout do project.47, uma foto tirada há alguns dias atrás (inaugurando a “subdivisão” de fotografias no portfolio), além da lista de sites na qual meu trabalho foi referenciado, muito interessante dar uma olhada neles.

E, com a aplicação da seção Portfolio, coloquei em prática a última parte que estava faltando para a finalização do novo layout do site, ou seja, foi inserido o “bloco” dos Projetos Recentes na coluna da direita, mostrando os últimos trabalhos cadastrados.

Topo 20/03/07

Etapas na criação de um site: project.47

Ao escrever este artigo, pretendo demonstrar quais etapas costumo percorrer para desenvolver um site, procurando ajudar aqueles que estão iniciando nesta prática. Utilizarei, como estudo de caso, o desenvolvimento do novo layout do project.47.

Problematização

Primeiramente, detectei a necessidade de construir um novo site, mas para poder fazę-lo, deveria saber o motivo para tal modificação, com relação ŕs versőes anteriores.

Após um estudo de novas possibilidades e viabilidade de implantação, descobri que deveria haver mais enfoque ao conteúdo do blog, deixando de lado o conceito de um site meramente pessoal, para servir como apresentação de trabalhos e auxiliar quem se interessa pelos assuntos aqui tratados (iniciantes e profissionais da área de desenvolvimento Web).

Sabendo o que pretendia atingir com o desenvolvimento de um novo conceito para o site, além do público-alvo, iniciei as tentativas de um novo layout para o mesmo. Continuar lendo…

Topo 16/03/07

WordPress lança diretório oficial de plugins

A equipe do [tag]Wordpress[/tag] acaba de lançar um diretório contendo milhares de [tag]plugins[/tag], mostrando todo o potencial da plataforma.

Os benefícios, segundo este post no blog oficial da plataforma, são os seguintes:

  • Maneira mais fácil e rápida de encontrar seus plugins, pois estão localizados num lugar só;
  • Poderá saber da qualidade do plugin e sua compatibilidade através do site;
  • No futuro, vocę poderá ser notificado, pelo WordPress, sobre atualizaçőes dos plugins utilizados.

É importante termos iniciativas como esta, pois tornará o caminho mais fácil, quando a intenção for encontrar recursos de qualidade para seu blog.

Topo 14/03/07

WaSP precisa de você

O [tag]Web Standards[/tag] Project, famoso projeto que tem como intuito a evangelização dos padrőes para desenvolvimento de sites, ou seja, o desenvolvimento de maneira correta dos mesmos, anunciou o lançamento do WaSP Street Team, visando atingir locais do nosso cotidiano, contando com a ajuda de todos para isso.

Ou seja, o propósito dessa equipe, composta por pessoas como eu ou vocę, seria a difusão dos Web Standards para pessoas que nunca tiveram contato com eles, seja em nosso trabalho, instituiçőes educacionais, etc., instituindo certos objetivos ou desafios a realizar. Como eles mesmos dizem no site do projeto, para atingir pessoas desta maneira, nada melhor do que reunindo todos, tendo maior eficácia, em prol de uma boa causa como esta.

Para ficar por dentro das novidades e início das atividades do grupo, basta participar da newsletter, preenchendo um formulário de cadastro presente no site do [tag]WaSP[/tag] Street Team.

Vamos ver se essa idéia irá vingar.

Topo 12/03/07

Novo site da Mídia Digital no ar

Novo layout da Mídia DigitalNovo site da agęncia Mídia Digital

É com muito orgulho que anuncio o lançamento do novo site da Mídia Digital, agęncia na qual trabalho. Para quem já havia visitado a versão anterior, pode notar grande diferença para a versão atual do mesmo.

Infelizmente o prazo para desenvolvę-lo foi muito curto, mas com certeza o resultado ficou acima do esperado. Fiquei encarregado pelo desenvolvimento de todo HTML (com auxílio do Lincoln) e CSS do site, aplicando microformats em certas seçőes do site, como já venho fazendo em meus últimos trabalhos. A equipe conseguiu finalizar todo o processo, incluindo o funcionamento do blog propriamente dito, dentro do WordPress, em quatro dias.

Mas, com certeza, o que mais chama atenção é o topo do site, um belo exemplo de utilização do Flash! Belos efeitos, mas nada absurdo, pois não tira a atenção do usuário com relação ao conteúdo. Desta forma, ao carregá-lo, o usuário se sente atraído pela animação, mas com certeza a relevância para o conteúdo não foi perdida, o que é extremamente essencial num blog.

E é essa a grande novidade do site. Claro, houve mudanças significativas na arquitetura da informação, com uma grande preocupação em mostrar os clientes e, conseqüentemente, o potencial da agęncia, mas a principal novidade é o sistema de blog, fazendo com que os usuários se sintam mais ŕ vontade ao navegar no site e, claro, atraindo mais visitantes para leitura constante, assinando os feeds etc.

Espero que vocęs gostem e, como já disse em outra ocasião, me sinto orgulhoso por fazer parte deste grupo.

Parabéns a todos que participaram do projeto!

[tags]Wordpress, blog, web design[/tags]

Topo 10/03/07

Referęncia aos Microformats – hCalendar

Há algum tempo, iniciei uma série de posts (que desejo continuar) sobre exemplos práticos de [tag]Microformats[/tag], para incentivar aqueles que nunca utilizaram ou não possuem interesse. No primeiro post, citei o hCard, situação na qual acredito que os Microformats são mais utilizados atualmente.

Agora meu objetivo é falar de outra prática comum no mundo dos Microformats: [tag]hCalendar[/tag]. Como em todo microformat, para aplicá-lo, basta seguir as classes pré-definidas e começar a utilizá-lo em seus projetos. Aliás, não há empecilhos em utilizá-lo num sistema totalmente dinamizado, por exemplo.

Na prática, o hCalendar pode ser utilizado como um simples calendário ou até uma agenda de eventos que, inclusive, venho utilizando em meus últimos trabalhos, tanto pessoais como na agęncia na qual trabalho. Este método se destina a ser aplicado em [tag]XHTML[/tag], Atom, RSS e XML.

Para facilitar a nossa vida, assim como no hCard, foi desenvolvido um gerador de hCalendar, visando deixar mais prático o processo de aplicação deste padrão.

Topo 07/03/07

Seleção de temas de WordPress

Com certeza o que faz do WordPress uma plataforma para gerenciamento de blogs diferente de suas concorrentes, é a variedade de temas disponíveis para download. O objetivo deste post é justamente dispor alguns bons exemplos de temas (não necessariamente os melhores), depois de uma boa pesquisa em vários sites do ramo.

  1. Red Business Tema WordPress: Red Business
  2. Grey Blog Tema WordPress: Grey Blog
  3. Sunrise Tema WordPress: Sunrise
  4. Moonlight Tema WordPress: Moonlight
  5. Durable Tema WordPress: Durable
  6. Glossy Blue Tema WordPress: Glossy Blue
  7. Vistered Little Tema WordPress: Vistered Little
  8. Black Minimalism Tema WordPress: Black Minimalism
  9. I Feel Dirty Tema WordPress: I Feel Dirty
  10. DFire Tema WordPress: DFire
  11. Fluid Solution Tema WordPress: Fluid Solution
  12. Dipdolt Tema WordPress: Dipdolt
  13. Red Bridge Tema WordPress: Red Bridge
  14. Earthling Tema WordPress: Earthling
  15. City Life Tema WordPress: City Life
  16. Digg 3 Columns Tema WordPress: Digg 3 Columns
  17. See You At The Beach Tema WordPress: See You At The Beach
  18. Peaceful Rush Tema WordPress: Peaceful Rush
  19. Dream On Tema WordPress: Dream On
  20. Redoable Tema WordPress: Redoable
  21. Fresh Tema WordPress: Fresh
  22. Blue Kupy Tema WordPress: Blue Kupy
  23. Solitude Tema WordPress: Solitude
  24. Slined Tema WordPress: Slined
  25. Unwakeable Tema WordPress: Unwakeable
  26. Underground Tema WordPress: Underground
  27. Freestyle Tema WordPress: Freestyle

Obs: Nenhum destes temas é de minha autoria e os direitos estão reservados a seus autores.
[tags]Wordpress, themes[/tags]

Topo 05/03/07

Novo painel no Dreamhost

Painel de Controle - Dreamhost Novo painel de controle do Dreamhost

Segundo este post no blog oficial do [tag]DreamHost[/tag], acaba de ser inaugurado o novo painel de controle do servidor, após 6 anos de utilização do modelo antigo.

Os benefícios são percebidos logo na primeira visita, e o que chama atenção é a drástica mudança nas cores, utilizando tons mais leves, seguindo os padrőes dos painéis atuais.

Entre as mudanças entram as seguintes:

  • Aparęncia “Web 2.0”, ou seja, cores claras, degradęs, sombras, etc.;
  • Layout completamente feito em CSS;
  • E, claro, utilização de Ajax.

Podemos perceber que os benefícios trazidos com certeza acarretam numa melhora na velocidade de acesso e manuseio do serviço.

1 comentário Assuntos: Geral
Topo 04/03/07

Alerta de segurança para o WordPress

Pouco tempo após o lançamento da versão 2.1.1, a equipe do [tag]Wordpress[/tag] liberou uma nova atualização para a plataforma.

Trata-se, segundo eles neste post do [tag]blog[/tag] oficial, de uma atualização de suma importância pois, houve uma invasão de hackers em seus servidores, que acabaram danificando o arquivo original da versão 2.1.1 do WordPress, possibilitando acesso remoto via php.

Portanto, baixe esta nova atualização para ficar livre (pelo menor por enquanto) de maiores preocupaçőes.

Links Randômicos
Meta
Apoio
Créditos
Creative Commons