Categorias
Tutoriais WordPress

Padrões de escrita de CSS

No último sábado dia 23 tivemos o WordCamp São Paulo evento oficial organizado pela comunidade WordPress. Uma das palestras que me chamou atenção foi a do Claudio Sanches, falou sobre padrões de codificação e dicas sobre desenvolvimento com WordPress, sua palestra teve o nome “Não é porque funcionou que significa que esta certo!”.

Uma das dicas do Claudio Sanches em sua palestra,  foi sobre o HandBook do WordPress documentação gerada pela equipe do Core do WordPress, nela contém dicas sobre codificação de CSS, HTML, JavaScript e PHP. Fiquei muito interessado no assunto e neste post vou traduzir os principais pontos do Handbook sobre CSS. Lembrando que esses padrões são especificados pela equipe do core do WordPress existem outros padrões definidos por outros times, mas muitas regras dessa guideline também podemos aplicar em projetos sem ser WordPress.

Estrutura

Uma estrutura limpa e legível é muito importante em um projeto com grandes equipes:

  • Para indentar use tabs, não use espaços.
  • Adicione duas linhas em branco para separar seções e uma linha para separar blocos da mesma seção.
  • Caso aplique uma mais de uma regra para um seletor colocar um em cada linha

exemplo:

/* correto */

#selector-1,
#selector-2,
#selector-3 {
    background: #fff;
    color: #000;
}

/* errado */

#selector-1, #selector-2, #selector-3 {
    background: #fff;
    color: #000;
    }

#selector-1 { background: #fff; color: #000; }

Seletores

São muito importantes para eficiência do seu CSS, mas pode ter resultado inverso no projeto quando mau executado.

  • Semelhante ao padrão de codificação do WordPress para nomes dos arquivos use letras minúsculas e palavras separadas por hífens ao nomear seletores.
  • Evite camelCase ou sublinhados.
  • Use seletores legíveis quem descrevam qual é elemento e qual é o sua aparência.
  • Seletores por atributo devem usar aspas duplas amarrando o seu valor.
  • Evite seletores sobre-qualificados, por exemplo, “div.container” podemos utilizar apenas “.container”.

Exemplo:

/* correto */

#comment-form {
    margin: 1em 0;
}

input[type="text"] {
    line-height: 1.1;
}

/* Incorrect: */

#commentForm { /* erro: camelCase. */
    margin: 0;
}

#comment_form { /* erro: underline. */
    margin: 0;
}

div#comment_form { /* erro: sobre-qualificação. */
    margin: 0;
}

#c1-xr { /* O que é c1-xr?! esse tipo de seletor não define nada. */
    margin: 0;
}

input[type=text] { /* com atributos devemos trabalhar dessa forma [type="text"] */
    line-height: 110%;
}

Propriedades

Menos é mais, verifique se você não está repetindo o estilo ou introduzindo dimensões fixas(quando a solução fluida é mais aceitável).

  • Propriedades devem ser seguidas de uma coluna e um espaço
  • Todas propriedades devem estar em caixa-baixa, exceto para nomes de Font específicas.
  • Usar código hexadecimal para cores, ou utilizar rgba() somente quando necessitar de utilizar opacidade.
  • Evitar de utilizar a propriedade rga em letras maiúsculas
  • Quando possível encurtar os valores hexadecimais: #fff ao invés de #FFFFFF
  • Use shorthand(exceto para overriding styles) para background, border, font, list-style, margin e padding.

Ordenação de Propriedades

Ordenação aleatório de propriedades é um caos, isso não é poesia. No Core do WordPress, utiliza dois padrões de ordenação: a lógica ou ordenada por categoria. As propriedades dentro de uma categoria são também estrategicamente ordenadas para criar uma transição entre seções, por exemplo, a propriedade “background” escrita antes do “color”.

A ordenação por categorias tem a seguinte base:

  • Display
  • Posicionamento
  • Box model
  • Cores e tipografias
  • Outros

Exemplo:

#overlay {
    position: absolute;
    z-index: 1;
    padding: 10px;
    background: #fff;
    color: #777;
}

Vendor Prefixes

São os prefixos para engine de cada browser, por exemplo,“-webkit”. Devem ser ordenados dos prefixos mais longos para os mais curtos. Valores devem ser alinhados a esquerda após os dois pontos os valores alinhas com tab com se fosse uma única coluna

Exemplo:

.koop-shiny {
    -webkit-box-shadow: inset 0 0 1px 1px #eee;
    -moz-box-shadow:    inset 0 0 1px 1px #eee;
    box-shadow:         inset 0 0 1px 1px #eee;
    -webkit-transition: border-color 0.1s;
    -moz-transition:    border-color 0.1s;
    -ms-transition:     border-color 0.1s;
    -o-transition:      border-color 0.1s;
    transition:         border-color 0.1s;
}

Caso especial CSS gradients:

.gradient {
    background: #fff;
    background-image: -webkit-gradient(linear, left bottom, left top, from(#fff), to(#000));
    background-image: -webkit-linear-gradient(bottom, #fff, #000);
    background-image:    -moz-linear-gradient(bottom, #fff, #000);
    background-image:      -o-linear-gradient(bottom, #fff, #000);
    background-image: linear-gradient(to top, #fff, #000);
}

Valores

Seguindo as guidelines abaixo podemos manter um alto grau de consistência em nosso arquivo CSS.

  • Espaço antes do valor e depois dos dois pontos
  • Sempre terminar com ponto e vírgula(claro)
  • Usar aspas duplas ao invés de aspas simples
  • Valor 0 não deve ter unidade(exemplo: 0%, 0px, 0em…)
  • Use o zero a esquerda para valores decimais, exemplo, evite usar valores como .5 o ideal é 0.5.
  • Em Múltiplos valores separados por vírgula, cada valor deve ser separado por vírgula ou uma nova linha.

Exemplo:

/* Correct: */

.class { /* Uso correto de aspas duplas */
    background-image: url(images/bg.png);
    font-family: "Helvetica Neue", sans-serif;
}

.class { /* Uso correto de valores com zero */
    font-family: Georgia, serif;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5),
                       0 1px 0 #fff;
}

/* Incorrect: */

.class { /* Erro: falta de espaço entre os valores */
    background:#fff
}

.class { /* Erro: adicionando unidade para 0 */
    margin: 0px 0px 20px 0px;
}

Media Queries

Media queries permitem adaptar o nosso DOM a diferentes tamanhos de tela. Não se esqueça de testar todas as regras para ter certeza que este será o esperado. Em geral, é aconselhável manter as media queries agrupadas na parte inferior de seu arquivo css. Uma exceção é feita para p arquivo wp-admin.css no core.

A regras para o media queries devem ser indentadas em um nível:

Exemplo:

@media all and (max-width: 699px) and (min-width: 520px) {

        /* Your selectors */
}

Comentários

Caso tenha preocupações sobre o tamanho do arquivo, utilize arquivos minificados e constante SCRIPT_DEBUG. Comentários longos devem ser quebrados a partir de 80 caracteres.

Uma tabela de conteúdo deve ser utilizada para stylesheet extensos, especialmente os que são altamente seccionados para isso usamos um índice numérico(1.0,1.1,2.0, ect) que auxilia a busca, nesse caso repetimos o número do índice na seção, assim quando o usuário realizar a busca o apontador irá pular para o local correto.

Comentários devem ser formatados tanto quanto PHPDoc é. Cabeçalho de Seções e subseções devem ter novas linhas antes e depois. Comentários inline não devem ter linhas vazias separando o conteúdo de um item para cada relacionado.

Exemplo de seções e subseções:

/**
* #.# Título da seção
*
*  Descrição da seção.
*/

.selector {
    float: left;
}

Exemplos inline:

/* Este comentário é para esse seletor */

.another-selector {
    position: absolute;
    top: 0 !important; /* Aqui vocês explica porque usou !important */
}

Considerações finais

  • Manter o código bem escrito desde o início, nos ajuda a manter a visão geral, deixando nosso código flexível a mudanças.
  • Se você está tentando resolver um problema, esforce para resolver o problema antes de adicionar mais.
  • Saiba quando usar a propriedade height. Isto deve ser usado para incluir elementos outside(como images). Caso contrário, use line-height para ter mais flexibilidade.
  • Não redefina propriedades default, por exemplo, display:block em elementos blocados.

Referências:

http://make.wordpress.org/core/handbook/coding-standards/css/
https://speakerdeck.com/claudiosmweb/nao-e-porque-funcionou-que-significa-que-esta-certo

Categorias
Eventos WordPress

Primeiro Meet up WordPress DRC

Neste sábado dia 26 de outubro rolou o primeiro meet up WordPress DRC o primeiro evento oficial do grupo WordPress Brasil em São Paulo. Nesse primeiro encontro organizado por Vogel Junior professor da DRC, contou com a presença de Cláudio Sanches e Rafael Funchal.

O evento teve início às 10 horas e rolou até as 13:30 teve um perfil bem informal, teve uma verdadeira aula sobre woo commerce. Hoje uma das principais ferramentas de e-commerce para WordPress os slides da apresentação você confere aqui:

Tive o prazer de conhecer o Cláudio no wordcamp Porto Alegre, um cara fantástico e extremamente talentosa. Com mais de 30 plugins no repositório do WordPress ainda tem tempo de prestar suporte a comunidade.

A segunda palestra com Rafael Funchal, foi uma apresentação do grupo WordPress Brasil mostrando alguns números sobre a plataforma e muitas dicas valiosas de como colaborar com o desenvolvimento do WordPress. Rafael deu algumas dicas sobre plugins que ele participou da tradução para o português.

Slides da apresentação do Rafael:

Rafael é um cara bastante ativo na comunidade junto com o Cláudio estão encabeçando a organização do WordCamp São Paulo.

Vale lembrar que as inscrições já estão abertas. No seguinte link :

http://2013.saopaulo.wordcamp.org/

Não perca tempo garanta já sua inscrição.

Categorias
Geral

Workshop WordPress on fire

No dia 24 de Maio de 2013 estarei em Maceió ministrando o workshop sobre WordPress no Adobe Camp Brasil. Estamos ai uma semana do evento uma oportunidade incrível de compartilhar conhecimento com os profissionais de Maceió e região, terra de grandes programadores e de um cenário muito ativo.

O workshop será durante todo o dia faz parte do Adobe Camp 2013, com uma duração de 8 horas vai ser uma verdadeira imersão no WordPress. Criei um programa da seguinte forma:

Conteúdo programático:

  • Porque utilizar o WordPress ?
  • Preparando um ambiente local para desenvolvimento
  • Dicas importantes sobre o admin
  • Posts x páginas
  • Gerenciando mídia
  • Perfís de usuários
  • Configurando seu blog
  • Arquitetura do WordPress
  • Estrutura de pastas
  • Organizão de arquivos
  • Criando um tema
  • Entendendo o loop
  • Carregando conteúdo do post
  • Include tags(header.php, footer.php)
  • Trabalhando com sidebar dinâmica
  • Trabalhando com menu dinâmico(administrável via painel)
  • Filtrando o loop com query_posts
  • Template page
  • Carregando campos personalizados
  • Publicando o seu projeto
  • Criando aplicações móveis com BlackBerry App Generator

O conteúdo vai desde informações básicas sobre WordPress e sua administração até a parte de criação de temas e finalizando uma demo de como criar aplicativos móveis com App Generator. Estou super empolgado com o workshop e no dia seguinte teremos o Adobe Camp serão dois dias de muito conhecimento.

Ainda restam vagas para o workshop, interessados :

http://adobecampbrasil.com.br/

E nos vemos lá em Maceió

Categorias
Eventos Mobile WordPress

Slides do terceiro Wordtalks DRC

No dia 05 de Fevereiro rolou o terceiro Wordtalks DRC no evento rolou três palestras. Rodrigo Simoni falando de 10 dicas de SEO, Luis Felipe falando sobre dicas de servidores para WordPress.

Minha apresentação foi sobre como utilizar o WordPress em aplicativos mobile. os slide da apresentação você confere aqui :

Slides da apresentação do Rodrigo Simoni:

Categorias
Eventos WordPress

Terceiro Wordtalks DRC

No dia 05 de fevereiro as 19:30 no auditório da DRC Treinamentos será realizado o terceiro Wordtalks. Para quem não conhece o evento, ele tem o seguinte forma, convidados e ex-alunos da DRC abordam assuntos sobre desenvolvimento relacionados ao WordPress.

Neste terceiro encontro terá o que rolou de melhor em 2012, mas calma as apresentações já ocorreram, em um evento “fechado” para os alunos e foram modificadas para esse encontro. Neste evento vai ter a duração de 1:50h, divido em três palestras de 30 minutos e 20 minutos para debate geral.

Para iniciar a noite como de costume, a primeira palestra será com Fellyph Cintra(eu) irá apresentar a palestra :

Utilizando o WordPress como CMS para aplicativos mobile. A palestra aborda alguns recursos disponíveis no HTML5 para a plataforma mobile e mostra como portar uma aplicação web para um dispositivo móvel.

A segunda apresentação da noite será com Luis Felipe Veiga com a apresentação: Não jogue seu projeto no lixo, Abordando pontos importantes ao contratar um plano de hospedagem para um site em WordPress e as diferenças entre os tipos de servidores.

E fechando a noite Rodrigo Simoni – Resumo da apresentação: 10 dicas de seo para WordPress. O WordPress é um ótimo CMS para trabalhar com SEO. Porém, há uma série de técnicas de SEO On Page, além de alguns plugins que são essenciais e obrigatórios para que seu site possa ganhar visibilidade e conseguir bons posicionamentos nas Serps do Google. Sitemap, Robots, URL amigáveis, canonical tags, conteúdo relevante, long tails e outras técnicas e ferramentas que farão toda a diferença.

Interessado? Para realizar a inscrição vá no seguinte link: 

http://www.drcconference.com.br/int_agenda/mostra_agenda.php?valor=043c5a5f32b221336aj42c8&valor2=cf40032f32b222576aj42c8

O encontro ocorre no auditório da DRC que fica no seguinte endereço :

Rua Joaquim Floriano, 733 – 10º Andar
São Paulo, 04534-012


Exibir mapa ampliado