Tradução do WordPress 2.1.3

O pessoal do taijiquan.pro, mantendo sua tradição de traduçőes para [tag]Wordpress[/tag], lançou o arquivo de tradução para a versão 2.1.3 da plataforma.

Caso vocę queira baixar e saber como proceder na instalação, basta visitar este link e, caso seja encontrado algum erro, por favor entre em contato com a equipe responsável pelo projeto.

Web Designer tem que saber CSS

Houve um perí­odo, mais precisamente no começo da “explosão” da Internet no final dos anos 90, no qual os indiví­duos que faziam sites eram chamados “Web Masters“, ou seja, eram estes os responsáveis pelo planejamento do site, a construção de seu layout, envio para o servidor e manutenção do mesmo.

Com o passar do tempo e expansão da Internet, recursos oferecidos, maior facilidade de acesso e popularização, o mercado acabou exigindo cada vez mais dos responsáveis pela construção do site, originando diversas funçőes, especializando os profissionais de cada área.

Uma das profissőes geradas foi a de Web Designer, profissional encarregado pela elaboração e construção do layout. Este termo acabou sendo banalizado, por ser utilizado por pessoas não capacitadas, assim como vem acontecendo com a profissão do designer em geral também. Na questão que trata sobre a verdadeira função de um Web Designer, há várias discussőes que defendem a idéia do profissional saber apenas criar o layout mas, ao meu ver, não basta criar, tem que saber como funciona o site, suas limitaçőes e implicaçőes que o Design pode ter em sua construção.

Desenvolver um layout voltado para a Web é totalmente diferente de algo criado para impressão, pois há variaçőes nos dispositivos e meios de acesso, fazendo com que alguns cuidados devam ser tomados. Isso inclui a escrita do HTML e CSS, pois não se tratam de linguagens de programação, mas de marcação e estilização, respectivamente. Não é uma tarefa difí­cil, só exige estudo e leitura, justamente para saber até onde se pode chegar com [tag]Web Design[/tag].

Por isso, Web Designers, deixem a preguiça e os editores visuais de lado! Pensem no conteúdo, na relevância do usuário, dando mais chances para que seu site dę certo e se destaque entre a grande maioria.

WordPress 2.1.3 e 2.0.10

[tag]Wordpress[/tag]
A equipe do WordPress anunciou, em seu blog oficial, o lançamento de mais duas atualizaçőes de segurança para a plataforma, uma para a versão 2.1 e outra para 2.0. Para realizar a atualização, basta baixar diretamente pelo site oficial.

Caso vocę seja assinante do Dreamhost, a atualização pode ser feita de forma automática, dentro do painel de controle, com apenas um clique.

Dicas para melhorar seu CSS: Parte 2

Volto a escrever sobre algumas práticas que podem fazer seu [tag]CSS[/tag] render mais e ser mais fácil de ser atualizado, fazendo o seu trabalho e o de sua equipe mais dinâmicos.

Especificidade

Considero que esta seja uma das dicas mais importantes, não muito utilizada atualmente, mas faz muita diferença principalmente nos trabalhos de grande porte, que exigem muitas regras e, consequentemente, id’s e classes em seu CSS.

Sua utilização depende muito do caso, mas pode influenciar em toda a continuação do projeto e, conseqüentemente, poderá dar mais trabalhos futuramente.

Segue um exemplo genérico para exemplificar a necessidade de sua utilização:

#header { color: #fafafa; background: url(../imgs/header_home.jpg) no-repeat; }

Neste exemplo, escrevemos um topo para a página “Home”, por exemplo. Porém, como sabemos, ele será aplicado a todo elemento que tiver a id “header”. Então, teremos que ser mais específicos ao escrever esta regra, aplicando uma classe, caso a página atual seja a inicial, por exemplo:

#header.home { color: #fafafa; background: url(../imgs/header_home.jpg) no-repeat; }

No exemplo acima, definimos que todo elemento com a id “header” que possua a classe “home” tenha as definiçőes impostas. Mas ainda não está bom, pois podemos querer estilizar outros elementos além do header, dependendo da Home. Então podemos, simplesmente, aplicar um id específico para esta página na div que engloba todos os elementos, ou no próprio body. Desta maneira, a gama de possibilidades será muito maior, pois precisaremos aplicar somente um id no html para que tudo se modifique de acordo com ele, por exemplo:

  
    #header { font-size: 16px; color: #fafafa; background-repeat: no-repeat; }
    body#home #header { background-image: url(../imgs/header_home.jpg); }
  

O exemplo acima é diferente em dois pontos: primeiro, defini as propriedades gerais para o elemento com a id “header”, como o tamanho da fonte, cor e repetição do fundo. Depois, o que é específico para o header da Home, no caso a imagem de fundo, especifiquei na linha abaixo.

Acredite, isso fará muita diferença em seu trabalho, pois deixará claro para onde deverá ser utilizada determinada regra, além de poupar ids e classes determinadas para cada página em todos os elementos, bastando nomear um elemento principal, no caso o body ou uma div que englobe todo o conteúdo do site.

Tratei o caso da especificidade de forma mais específica neste artigo, vale a pena ler.

Nomeação de id’s e classes

Também devemos nos preocupar com a nomeação de nossos id’s e classes.

Esta dica não se encaixa perfeitamente no caso do CSS, embora facilite em sua manutenção também.

O recomendável é que, no momento no qual for escrever seu html, dę preferęncia a id’s e classes com significado, ou seja, não aplique nomes determinados pelo aspecto visual do elemento, mas pela função dele no site.

Por exemplo: ao montar a página de produtos de uma determinada empresa, onde cada produto está inserido numa caixa cinza, não aplique o nome “caixacinza” para o elemento mas, por exemplo, “produto”, deixando claro que a classe é utilizada para cada produto, e é nela onde vocę definirá a estilização visual da “caixa cinza”, sempre utilizando a especificidade do CSS, como foi explanada no item anterior deste artigo.

Organização

Essa dica faz muita diferença na manutenção do site. Quando menciono o termo “manutenção” não digo só o seu trabalho ao reabrir o CSS e modificar os elementos, mas falo em facilidade em entendę-lo, tanto por vocę mesmo, quanto por outras pessoas de sua equipe, caso necessitem alterar o código.

Recomendo que vocę escreva seu código ramificando-o pelas seçőes do site, caso seja extenso e bastante ramificado. Há diversas outras maneiras de dividir, tanto pelas colunas, por exemplo, como pelos elementos. Por exemplo:

  
  /* geral */
  * { margin: 0; padding: 0; }
  html, body { background: #fafafa; font: 90% Arial, sans-serif; }
  #limites { width: 750px; margin: 0 auto; }

  /* topo */
  h1 { height: 120px; background-repeat: no-repeat; color: #fff; }

  /* home */
  #limites.home h1 { background-image: url(../imgs/topo_home.jpg);
  #limites.home h2 { border-bottom: 1px solid #333; }
  

Desta forma, primeiramente, defini algumas regras gerais, aplicáveis a elementos pelo site inteiro. Mas logo abaixo, no comentário “home”, especifiquei algumas regras aplicáveis somente ŕs páginas que possuem o elemento com a id “limites” e classe “home”. Também aproveitei para “indentá-lo” para facilitar sua leitura.

CSS Naked Day 07

Está prestes a começar a segunda edição do [tag]CSS[/tag] Naked Day, uma espécie de movimento que propőe aos Web Designers retirarem o CSS de seus sites por um dia, deixando-os literalmente nus, sem sua estilização visual.

Para participar é simples, basta se cadastrar na lista do site oficial e retirar o CSS de seu site no dia 5 de Abril. Há até a opção de um plugin para WordPress que automatiza a retirada dos estilos.