Quer aprender mais sobre HTML? Então você está no lugar certo. Aqui você vai ver todos os artigos relacionados a HTML, HTML5 e muito mais.

Provavelmente você já deve ter visto, ou até precisado, de um menu HTML com CSS com submenu e subníveis. Por subníveis, quero dizer que os submenus podem ter vários outros submenus dentro deles.

Neste vídeo tutorial vou detalhar como criar tal menu utilizando apenas CSS, sem nada de JavaScript. Além disso, o menu suporta quantos submenus forem necessários para seu layout.

Vídeo tutorial

Abaixo o vídeo tutorial detalhando tudo o que você precisa saber:

O código criado no vídeo acima pode ser encontrado em:

Você pode editá-lo conforme sua necessidade.

O HTML criado no vídeo

Abaixo segue o HTML criado no vídeo:

<div class="menu-container">
    <ul class="menu clearfix">
        <li><a href="#">Item</a>
            <!-- Nível 1 -->
            <!-- submenu -->
            <ul class="sub-menu clearfix">
                <li><a href="#">Sub</a>
                    <!-- Nível 2 -->
                    <!-- submenu do submenu -->
                    <ul class="sub-menu">
                        <li><a href="#">Sub Sub</a>
                            <!-- Nível 3 -->
                            <!-- submenu do submenu do submenu -->
                            <ul class="sub-menu">
                                <li><a href="#">Sub Sub</a></li>
                                <li><a href="#">Sub Sub</a></li>
                                <li><a href="#">Sub Sub</a></li>
                                <li><a href="#">Sub Sub</a></li>
                                <li><a href="#">Sub Sub</a></li>
                            </ul><!-- submenu do submenu do submenu -->
                        </li>
                        <li><a href="#">Sub Sub</a></li>
                        <li><a href="#">Sub Sub</a></li>
                        <li><a href="#">Sub Sub</a></li>
                        <li><a href="#">Sub Sub</a></li>
                    </ul><!-- submenu do submenu -->
                </li>
                <li><a href="#">Sub</a></li>
                <li><a href="#">Sub</a></li>
                <li><a href="#">Sub</a></li>
                <li><a href="#">Sub</a></li>
                <li><a href="#">Sub</a></li>
            </ul><!-- submenu -->
        </li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
    </ul>
</div>

 O CSS criado no vídeo

Abaixo segue o CSS criado no vídeo:

body, 
.menu,
.sub-menu {
    margin: 0;
    padding: 0;
}
.clearfix:after{
    content: '.';
    display: block;
    clear: both;
    height: 0;
    line-height: 0;
    font-size: 0;
    visibility: hidden;
    overflow: hidden;
}
.menu,
.sub-menu {
    list-style: none;
    background: #000;
}
.sub-menu {
    background: #444;
}
.menu a {
    text-decoration: none;
    display: block;
    padding: 10px;
    color: #fff;
    font-family: sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 700;
}
.menu li {
    position: relative;
}
.menu > li {
    float: left;
}
.menu > li:hover {
    background: #444;
}
.menu li:hover > .sub-menu {
    display: block;
}
.sub-menu {
    display: none;
    position: absolute;
    min-width: 150px;
}
.sub-menu li:hover {
    background: #555;
}
.sub-menu .sub-menu {
    top: 0;
    left: 100%;
}

Só isso fará seu menu funcionar perfeitamente.

Concluindo

Se tiver algum dúvida, comente-a!

Quando eu comecei a aprender a desenvolver, não tinha a menor ideia do que o tal do charset (codificação de caracteres) fazia. Como consequência disso, vivia lutando com os erros de charset em meu código.

Quando conseguia resolver o problema no HTML utilizando a meta tag referente, aparecia o problema na base de dados, quando conseguia resolver o problema da base de dados, aparecia o problema em requisições Ajax, e assim por diante. Você pode imaginar todos os tipos de problemas de codificação de caracteres, e eu posso garantir que tive todos eles no início.

Neste tutorial, vou explicar um pouco sobre o que e como evitar erros de charset no seu código, seja PHP, HTML, JavaScript ou bases de dados.

O que é charset?

Charset é a codificação de caracteres utilizada para formar qualquer valor fora das mais básicas letras do alfabeto inglês. Isso significa que você não terá problemas se utilizar apenas letras de A a Z e números de 0 a 9 no seu código. Mas quem utiliza apenas isso? E pior, quem vai confiar que um programa vai utilizar apenas letras e números?

Qualquer caractere com acento, cedilha ou caracteres especiais precisa ser decodificado para que o navegador ou o programa que você estiver utilizando saiba como apresentar seu conteúdo na tela.

Se você não for consistente e utilizar o mesmo charset em seu projeto inteiro, o texto abaixo:

Atenção, meu nome é Luiz Otávio

Pode ser apresentado assim:

Atenção, meu nome é Luiz Otávio

Para seu usuário final.

Além de prejudicar a leitura dos seus usuários, você terá problemas com SEO, já que os buscadores também não entenderão o que estiver escrito no seu site (apenas um exemplo).

Então vamos ver como corrigir este problema.

Qual charset utilizar?

Na verdade você pode utilizar qualquer charset que preferir, contanto que seja consistente e utilize o mesmo valor em todas as partes do seu código. Tanto no mais simples HTML, quanto na base de dados e códigos PHP.

Quando digo que você deve ser consistente, estou me referindo a configurar seu editor de textos com aquela codificação, e seguir o padrão em tudo o que utilizar dali em diante.

Tudo o que você utiliza para desenvolvimento pode ser configurado para uma codificação de caracteres específica, se você não achar essa configuração, infelizmente acho que você está utilizando o software incorreto.

Se eu tiver que indicar uma codificação de caracteres padrão para todos os elementos do seu projeto, com certeza iria com UTF-8. Portanto, daqui em diante vou assumir que você vai utilizar UTF-8.

Editor de textos

Todo editor de texto para desenvolvimento tem uma configuração onde você modifica a codificação de caracteres, seja pago ou gratuito.

Não tenho como detalhar como fazer a modificação em todos eles, então vou explicar como fazer apenas no Notepad++ (que é o programa que utilizo).

Alterando o charset no notepad++

Para alterar a codificação de caracteres do Notepad++, simplesmente clique no menu “Formatar” e escolha a opção “Configuração em UTF-8 (Sem BOM)”.

Codificação em UTF-8 (Sem BOM)

Codificação em UTF-8 (Sem BOM)

Infelizmente o Notepad++ não corrige o que já foi escrito, apenas mostra caracteres estranhos onde deveriam aparecer letras acentuadas e coisas do tipo. Para resolver este problema, você deve modificar o documento manualmente.

Por outro lado, você pode fazer com que todos os seus novos arquivos sejam iniciados com essa configuração. Para isso siga os passos abaixo:

  • Clique em “Configurações” – “Preferências”;
  • Vá até “Novo documento”;
  • Marque a opção “UTF-8 sem BOM”.
UTF-8 sem BOM

UTF-8 sem BOM

Agora todos os novos documentos serão automaticamente configurados para o charset UTF-8.

O HTML

Todo documento HTML deve ter uma meta tag especificando qual charset utilizar. No HTML5 isso ficou tão simples que você pode gravar de cabeça:

<meta charset="UTF-8">

Toda meta tag deve vir na head do seu documento HTML, ou seja, para exibirmos a frase que mostrei na introdução do artigo, basta criar um documento HTML5 com o seguinte:

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Título do documento</title>
    </head>
    <body>
        <p>Atenção, meu nome é Luiz Otávio</p>
    </body>
</html>

Pronto, apenas com a combinação do editor de textos e a meta tag charset nos seus documentos HTML, você não terá problemas ao exibir qualquer tipo de caractere na tela do navegador.

Se seu documento for XML, faça o seguinte:

<?xml version="1.0" encoding="UTF-8" ?>

Informando UTF-8, conforme o código acima.

 O PHP

Normalmente, quando exibimos qualquer caractere na tela utilizamos PHP, estamos envolvidos em documentos HTML que já trazem a meta tag charset embutida. O PHP deverá seguir o padrão e exibir os caracteres conforme o documento HTML indicar.

Se por algum motivo você precisar forçar o PHP a exibir qualquer coisa com charset UTF-8, é possível utilizar a função header.

Essa função modifica o cabeçalho do documento e deve ser utilizada antes que você exiba qualquer coisa na tela (normalmente na primeira linha do arquivo).

Veja:

<?php
// Charset UTF-8
header('Content-Type: text/html; charset=utf-8');

// Sem erros de caracteres
echo 'Atenção';
?>

Se você analisar o cabeçalho do documento, agora temos a codificação de caracteres exatamente conforme esperávamos.

Cabeçalho do documento HTML

Cabeçalho do documento HTML

Simplesmente fazendo isso, agora seu documento não apresentará mais erros de charset.

Bases de dados

Na criação de tabelas e bases de dados, informe que a codificação de caracteres é UTF8. Qualquer programa razoavelmente bom irá perguntar qual o charset você deseja.

Configurando uma nova base de dados

Configurando uma nova base de dados

Se você tiver o hábito de criar bases de dados manualmente, faça o seguinte:

CREATE DATABASE `Nome_da_BD` CHARACTER SET utf8 COLLATE utf8_bin;

O mesmo serve para tabelas:

Nova tabela

Nova tabela

Se você tiver o hábito de criar tabelas manualmente, faça o seguinte:

CREATE TABLE `nome_da_bd`.`mesma_coisa` 
(`id` INT NOT NULL, PRIMARY KEY (`id`)) 
ENGINE = INNODB 
CHARSET = utf8 
COLLATE = utf8_bin ;

 Conexão

Uma das partes mais importantes para evitar erros de codificação com a base de dados, com certeza é a conexão. Se você não especificar o charset a ser utilizado, provavelmente terá problemas com caracteres.

Se você estiver utilizando PDO, é bem simples de resolver este problema, basta adicionar “charset=utf8” na conexão. Veja:

$conexao_pdo = new PDO(
    'mysql:host=localhost;dbname=nome_da_bd;charset=utf8',
    'root',
    ''
);

Agora você pode tanto inserir quanto buscar valores da base de dados que os caracteres serão exatamente os mesmos do seu HTML e PHP.

Não se esqueça: UTF-8

Em qualquer lugar que puder modificar a codificação de caracteres, configure para UTF-8 e você nunca mais terá problemas com caracteres estranhos aparecendo na tela.

Concluindo

Este foi um artigo bem básico, mas que detalha uma parte muito essencial da sua programação. Normalmente, livros e cursos passam por essa parte sem dar a importância requerida, com isso novos desenvolvedores também deixam de dar importância para a codificação de caracteres e sofrem com isso posteriormente.

Se você tiver alguma dica para acrescentar a este artigo, sinta-se à vontade. O mesmo serve para suas dúvidas.

Referências:

Trabalhar com inputs do tipo text ou textareas utilizando HTML e PHP é relativamente simples. Seu valor é o mesmo que está gravado na base de dados, você só precisa conferir e exibir no código. Por outro lado, quando trabalhamos com inputs do tipo radio ou checkbox, seu valor é fixo, não pode ser alterado e, em alguns casos, nem mesmo exibido.

Inputs tipo checkbox e radio não exibem valores na tela do usuário, apenas uma opção para ser selecionada.

Inputs tipo checkbox e radio

Inputs tipo checkbox e radio

Vamos entender como tratar o envio de formulários com inputs de radio e checkbox abaixo.

Analisando os dados

Antes de qualquer coisa, precisamos analisar os dados enviados pelo nosso formulário, então vamos criar tal formulário em um arquivo PHP, que envia dados para si próprio (apenas para facilitar nossa vida):

<form action="" method="POST">
	<input type="checkbox" name="exemplo" id="exemplo" value="1">
	<label for="exemplo">Exemplo de checkbox</label><br><br>
	
	<p><label for="entendeu">Entendeu?</label></p>
	
	<input type="radio" name="entendeu" value="1"> Sim
	
	<input type="radio" name="entendeu" id="entendeu" value="0"> Não
	
	<br><br>
	
	<input type="submit" value="Enviar">
</form>

Antes do formulário, vamos analisar o que será postado pelo mesmo quando ele for enviado.

Para fazer isso, utilize o trecho de código abaixo.

<?php
/* 
Verifica se algo foi postado pelo nosso formulário.
Neste caso o tipo do formulário deverá ser POST, e o 
POST não deve estar vazio.
*/
if ( 'POST' === $_SERVER['REQUEST_METHOD'] && ! empty( $_POST ) ) {

	// Abre uma tag <pre>
	echo '<pre>';

	// Exibe o conteúdo do post
	print_r( $_POST );
	
	// Fecha a tag pre
	echo '</pre>';
}
?>

Na primeira parte do código acima, simplesmente verificamos se o formulário foi enviado para o navegador e se o HTTP POST não está vazio. Se não foi postado ou o post estiver vazio, não faremos nada.

Com isso em mente, se você enviar o formulário que criamos anteriormente sem marcar nada, nada é feito.

Caso marque um dos campos, terá o seguinte:

Array
(
    [exemplo] => 1
    [entendeu] => 0
)

Um array com o nome e valores dos campos do formulário.

Você pode acessar qualquer valor com o seguinte formato:

echo $_POST['entendeu'];
echo $_POST['exemplo'];

Ou da forma mais longa, evitando erros:

<?php
/* 
Verifica se algo foi postado pelo nosso formulário.
Neste caso o tipo do formulário deverá ser POST, e o 
POST não deve estar vazio.
*/
if ( 'POST' === $_SERVER['REQUEST_METHOD'] && ! empty( $_POST ) ) {

	// Verifica o campo de nome "entendeu"
	if ( ! empty( $_POST['entendeu'] ) ) {
		// Exibe os dados do campo entendeu
		echo 'Endendeu = ' . $_POST['entendeu'] . '<br>';
	}

	// Verifica o campo de nome "exemplo"
	if ( ! empty( $_POST['exemplo'] ) ) {
		// Exibe os dados do campo exemplo
		echo 'Exemplo = ' . $_POST['exemplo'] . '<br>';
	}
	
}
?>

Agora vamos manipular um pouco os dados com PHP.

Remarcando inputs depois do formulário enviado

Como estamos tratando de formulários HTML com PHP puro, assim que os dados forem enviados para o servidor, nada que o usuário havia marcado ou escrito estará marcado ou escrito. Existem várias maneiras para corrigir este problema, uma delas é verificar se os dados foram salvos na base de dados, buscar esses dados e exibi-los; a outra é exibir os próprios dados do que o usuário postou anteriormente (ou ambas, dependendo do caso).

O problema é que não podemos fazer isso com inputs de radio ou checkbox, já que não vamos exibir seu valor para o usuário, vamos apenas remarcar o campo se ele tiver sido marcado anteriormente.

Lembre-se que para marcar um input do tipo checkbox ou radio, basta adicionar o atributo “checked” no mesmo. Exemplo:

<input type="radio" id="entendeu" name="entendeu" value="1" checked> Sim

Para fazer a verificação se o usuário marcou tal input antes de enviar o formulário, faremos o seguinte:

<form action="" method="POST">
	<?php 
	// Variável que vai marcar nosso input de exemplo
	$marca_exemplo = null;
	
	// Verifica se o campo exemplo tem algum valor
	// E se este valor é igual a 1
	if ( ! empty( $_POST['exemplo'] ) && $_POST['exemplo'] == 1 ) {
		// Modifica o valor da variável 
		$marca_exemplo = ' checked ';
	}	
	?>
	<input <?php echo $marca_exemplo?> type="checkbox" name="exemplo" id="exemplo" value="1">
	<label for="exemplo">Exemplo de checkbox</label><br><br>
	
	<p><label for="entendeu">Entendeu?</label></p>
	
	<?php 
	// Marca "entendeu"
	$marca_entendeu_sim = null;
	$marca_entendeu_nao = null;
	
	// Verifica se o campo entendeu tem algum valor
	// E se este valor é igual a 1
	if ( ! empty( $_POST['entendeu'] ) && $_POST['entendeu'] == 1 ) {
		// Modifica o valor da variável 
		$marca_entendeu_sim = ' checked ';
	} elseif ( empty( $_POST['entendeu'] ) ) {
		// Modifica o valor da variável 
		$marca_entendeu_nao =' checked ';
	}
	?>	
	
	<input <?php echo $marca_entendeu_sim?> type="radio" id="entendeu" name="entendeu" value="1"> Sim
	
	<input <?php echo $marca_entendeu_nao?> type="radio" name="entendeu" value="0"> Não
	
	<br><br>
	
	<input type="submit" value="Enviar">
</form>

Agora, toda vez que o formulário for enviado, os inputs serão remarcados conforme estavam antes da atualização da página.

Nos trechos de código PHP acima, simplesmente criamos uma variável sem valor algum (null) e só modificamos seu valor se o valor do input não estiver vazio. Fizemos isso em ambas as partes do código.

Cuidados com checkbox e radio com HTML e PHP

Um dos primeiros cuidados que você precisa ter quando for trabalhar com inputs do tipo checkbox ou radio, é que eles não configuram nenhuma chave no POST para o PHP quando não forem marcados.

Isso pode gerar um erro de Notice se você fizer o seguinte:

<?php
/* 
Verifica se algo foi postado pelo nosso formulário.
Neste caso o tipo do formulário deverá ser POST, e o 
POST não deve estar vazio.
*/
if ( 'POST' === $_SERVER['REQUEST_METHOD'] && ! empty( $_POST ) ) {

	// Erro de Notice se o input não for marcado
	echo $_POST['exemplo'];
	
}
?>

Para prevenir isso, você deve checar se a chave está configurada no array da seguinte maneira:

<?php
/* 
Verifica se algo foi postado pelo nosso formulário.
Neste caso o tipo do formulário deverá ser POST, e o 
POST não deve estar vazio.
*/
if ( 'POST' === $_SERVER['REQUEST_METHOD'] && ! empty( $_POST ) ) {

	// Configura o valor de exemplo em uma variável se a chave
	// estiver configurada
	$exemplo = !empty($_POST['exemplo']) ? $_POST['exemplo'] : '';
	
	// Agora você pode utilizar a variável $exemplo sem medo
	echo $exemplo;
	
}
?>

Além de mais seguro, seu código fica mais simples.

Concluindo

Inputs de checkbox e radio são muito úteis para opções que o usuário não tem que digitar nada, apenas concordar com algo. Além disso, este tipo de opção evita erros que o usuário possa gerar no sistema, já que o valor será escolhido por você e é certeza que este será o mesmo que você escolheu sempre.

Outro ponto que gosto muito nos inputs de checkbox e radio é que você pode configurar valores inteiros na base de dados, ou seja, 1 para sim e 0 para não, ou 1 para concordar e vazio para discordar. Ocupa menos espaço e facilita minha vida como desenvolvedor.

Caso tenha alguma dúvida, não hesite em deixar seu comentário.

Menu em abas (ou blocos com abas) são bastante úteis para o seu layout. Com eles é possível dividir seu conteúdo por categoria, deixar o layout mais limpo e aprimorar a experiência do usuário em seu site.

Criar o menu em abas é ainda mais simples. Com um pouco de HTML, CSS e uma ajudinha do jQuery, serão apenas algumas linhas de código até você atingir o objetivo.

Veja um exemplo do que vamos criar neste tutorial:

Então vamos lá.

Código completo

Primeiramente, vou exibir o código completo, depois explico tudo em blocos.

O HTML:

<div class="content">
  <div class="tabs-content">
    <div class="tabs-menu clearfix">
      <ul>
        <li><a class="active-tab-menu" href="#" data-tab="tab1">Lorem</a></li>
        <li><a href="#" data-tab="tab2">Ipsum</a></li>
        <li><a href="#" data-tab="tab3">Dolor</a></li>
      </ul>
    </div> <!-- tabs-menu -->
    
    <div class="tab1 tabs first-tab">
     Conteúdo da aba 1
    </div> <!-- .tab1 -->
    
    <div class="tab2 tabs">
      Conteúdo da aba 2
    </div> <!-- .tab2 -->
    
    <div class="tab3 tabs">
      Conteúdo da aba 3 
    </div> <!-- .tab3 -->
    
  </div> <!-- .tabs -->
</div> <!-- .content -->

 O CSS:

/* Geral */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: 12px;
  line-height: 1.5;
}
body {
  background: #222222;
}
a:focus {
  outline: none;
}
.content {
  margin: 30px;
}
.clearfix:after {
  content: '.';
  height: 0;
  font-size: 0;
  line-height: 0;
  display: block;
  clear: both;
  overflow: hidden;
  visibility: hidden;
}

/* Abas */
.tabs-content {
  background: #eee;
  font-family: sans-serif;
}

/* Menu das abas */
.tabs-menu {
  background: #0074a2;
}
.tabs-menu ul {
   list-style: none;
}
.tabs-menu ul li {
  float: left;
}
.tabs-menu ul li a {
  display: block;
  padding: 10px 20px;
  text-decoration: none;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #fff;
}
.tabs-menu ul li a.active-tab-menu {
  background: #eee;
  color: #000;
}

/* Conteúdo das abas */
.tabs {
  display: none;
  padding: 30px;
}
.first-tab {
  display: block;
}

 O jQuery:

jQuery(function($){
  $('.tabs-menu ul li a').click(function(){
    var a = $(this);
    var active_tab_class = 'active-tab-menu';
    var the_tab = '.' + a.attr('data-tab');
    
    $('.tabs-menu ul li a').removeClass(active_tab_class);
    a.addClass(active_tab_class);
    
    $('.tabs-content .tabs').css({
      'display' : 'none'
    });
    
    $(the_tab).show();
    
    return false;
  });
});

Vamos aos detalhes.

Explicação detalhada

Agora vou detalhar o que cada uma das partes do nosso código faz.

O HTML:

O elemento com classe “content” não faz nada em específico, é apenas um div que contém todo o nosso HTML.

<div class="content">

</div> <!-- .content -->

As tags “tabs-content” são o conteúdo das abas, portanto, podemos configurar uma cor de fundo, fonte e coisas do tipo utilizando CSS.

<div class="content">
  <div class="tabs-content">

  </div> <!-- .tabs -->
</div> <!-- .content -->

Os elementos “tabs-menu” será o menu das abas:

<div class="tabs-menu clearfix">
  <ul>
    <li><a class="active-tab-menu" href="#" data-tab="tab1">Lorem</a></li>
    <li><a href="#" data-tab="tab2">Ipsum</a></li>
    <li><a href="#" data-tab="tab3">Dolor</a></li>
  </ul>
</div> <!-- tabs-menu -->

A opção “data-tab” dos links indicará a classe da aba a ser exibida pelo jQuery.

As abas podem ter duas ou três classes, são elas:

  • classe-da-aba – A classe que você escolher para sua aba
  • tabs – Classe padrão de abas
  • first-tab – A tag que será exibida por padrão
<div class="tab1 tabs first-tab">

</div>

 O CSS

O CSS das abas é relativamente bem simples.

Configuramos a cor de fundo e a fonte:

/* Abas */
.tabs-content {
  background: #eee;
  font-family: sans-serif;
}

O menu das abas:

/* Menu das abas */
.tabs-menu {
  background: #0074a2;
}
.tabs-menu ul {
   list-style: none;
}
.tabs-menu ul li {
  float: left;
}
.tabs-menu ul li a {
  display: block;
  padding: 10px 20px;
  text-decoration: none;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #fff;
}
.tabs-menu ul li a.active-tab-menu {
  background: #eee;
  color: #000;
}

Este é um menu como qualquer outro. A classe active-tab-menu será ativada pelo jQuery.

Depois ocultamos todas as abas e mostramos apenas a principal:

/* Conteúdo das abas */
.tabs {
  display: none;
  padding: 30px;
}
.first-tab {
  display: block;
}

 O jQuery:

O jQuery faz o seguinte (veja nos comentários):

// Inicia o jQuery
jQuery(function($){
  
  // Captura o clique no link do menu das abas
  $('.tabs-menu ul li a').click(function(){
    
    /** Variáveis **/
    
    // Configura o link clicado
    var a = $(this);
    
    // A classe da aba ativa
    var active_tab_class = 'active-tab-menu';
    
    // Captura o atributo data-tab e gera uma classe
    var the_tab = '.' + a.attr('data-tab');
    
    // Remove a classe de aba ativa de todas as abas
    $('.tabs-menu ul li a').removeClass(active_tab_class);
    
    // Adiciona a classe de aba ativa apenas no link clicado
    a.addClass(active_tab_class);
    
    // Adiciona um CSS para ocultar todas as abas
    $('.tabs-content .tabs').css({
      'display' : 'none'
    });
    
    // Mostra apenas a aba que queremos
    $(the_tab).show();
    
    // Não deixa o navegador atualizar a página
    return false;
  });
});

Veja uma demonstração aqui.

Em caso de dúvidas, basta perguntar.

Atualmente, enviar formulários com Ajax, PHP e jQuery é moda entre desenvolvedores experientes e novatos, e não é por menos, além de economizar um novo carregamento de página, o usuário não perde o que já foi digitado no formulário, o que acontecia com os bons e velhos formulários em HTML e PHP.

Os prós de você aprender a tática que vou detalhar neste tutorial são:

  • Economia de recursos do servidor: Não é preciso um novo carregamento de página para enviar o formulário;
  • O usuário não perde o que foi digitado no formulário: Como não temos um novo carregamento de página, os dados que o usuário digitou permanecem no formulário;
  • Caso ocorra um erro de validação, apenas uma pequena parte da página é atualizada (para mostrar o erro ao usuário);
  • O código PHP morre ( exit ) assim que um erro de validação ocorrer;

Os contras são:

  • Você precisa saber o que fazer depois que o formulário for enviado;
  • Você deve tomar cuidado para o formulário não ser enviado milhares de vezes (cada clique no botão de submit gera um novo envio);
  • Você deve manipular os erros manualmente (caso contrário o usuário não vai saber o que está acontecendo por baixo dos panos).

Além disso, antes de continuar lendo este tutorial, saiba que vamos utilizar jQuery e o recurso que a biblioteca nos oferece sobre a utilização do Ajax. Se você quiser utilizar o Ajax nativo do JavaScript, veja nosso outro tutorial:

Então vamos lá!

A proposta

Para este tutorial, vamos simular a criação de um perfil de usuário bem simples.

Os campos do formulário serão:

  • Nome
  • Sobrenome
  • Sexo
  • Idade
  • Foto

Você pode adicionar mais campos se precisar, vou explicar como isso funciona no decorrer do tutorial.

A base de dados MySQL

Para salvar os dados dos nossos "clientes", vamos utilizar uma base de dados MySQL. No PHP vamos utilizar PDO para fazer a conexão com a base de dados e manipulação da base de dados.

O nome da base de dados será "clientes" e nossa tabela vai se chamar "dados_clientes".

Criação de base de dados e PDO fogem ao escopo do nosso tutorial, portanto, caso tenha dificuldades com esses assuntos, leia os artigos abaixo:

Nossa tabela terá os seguintes dados:

CREATE TABLE `clientes`.`dados_clientes` (
  `cliente_id` INT (11) NOT NULL AUTO_INCREMENT,
  `cliente_nome` VARCHAR (255),
  `cliente_sobrenome` VARCHAR (255),
  `cliente_idade` VARCHAR (255),
  `cliente_sexo` ENUM ('Masculino', 'Feminino', 'Outro'),
  `cliente_foto` VARCHAR (255),
  PRIMARY KEY (`cliente_id`)
) CHARSET = utf8 ;

Vamos utilizar charset UTF8, fique atento a este detalhe, caso contrário terá erros de codificação.

O formulário HTML

Nosso formulário irá utilizar os benefícios do HTML5, se você ainda não viu, recentemente escrevi um tutorial detalhando os novos recursos do HTML5 em formulários, veja no link abaixo:

Nosso formulário completo ficou assim:

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Formulário HTML5 - Tutsup</title>
</head>
<body>

<form class="form_clientes" action="php/envia_clientes.php" method="post" enctype="multipart/form-data">

	<label for="cliente_nome"> Nome: </label> <br>
	<input type="text" class="cliente_nome" id="cliente_nome" name="cliente_nome" required> <br><br>
	
	<label for="cliente_sobrenome"> Sobrenome: </label> <br>
	<input type="text" class="cliente_sobrenome" id="cliente_sobrenome" name="cliente_sobrenome" required> <br><br>
	
	<label for="cliente_idade"> Idade: </label> <br>
	<input type="number" class="cliente_idade" id="cliente_idade" name="cliente_idade" required> <br><br>
	
	<label for="cliente_sexo"> Sexo: </label> <br>
	<select class="cliente_sexo" id="cliente_sexo" name="cliente_sexo" required>
		<option value=""></option>
		<option value="Masculino">Masculino</option>
		<option value="Feminino">Feminino</option>
		<option value="Outro">Outro</option>
	</select>
	<br><br>
	
	<label for="cliente_foto"> Nome: </label> <br>
	<input type="file" class="cliente_foto" id="cliente_foto" name="cliente_foto" required> <br><br>
	
	<input type="submit" value="Enviar">
	
</form>

</body>
</html>

É um formulário bem básico, porém, utilizamos todos os padrões necessários.

O PHP

Nossos arquivos de PHP deverão estar em uma pasta chamada php. Crie esta pasta e inclua os arquivos indicados nela.

pdo.php

O primeiro arquivo que vamos criar é o de conexão com a base de dados (PDO), veja:

<?php
/* Variáveis PDO */
$base_dados = 'clientes';
$usuario_bd = 'root';
$senha_bd   = '';
$host_db    = 'localhost';
$charset_db = 'utf8';
$conexao_pdo = null;
 
/* Concatenação das variáveis para detalhes da classe PDO */
$detalhes_pdo  = 'mysql:host=' . $host_db;
$detalhes_pdo .= ';dbname='. $base_dados;
$detalhes_pdo .= ';charset='. $charset_db;
 
// Tenta conectar
try {
    // Cria a conexão PDO com a base de dados
    $conexao_pdo = new PDO($detalhes_pdo, $usuario_bd, $senha_bd);
} catch (PDOException $e) {
    // Se der algo errado, mostra o erro PDO
    print "Erro: " . $e->getMessage() . "<br/>";
    
    // Mata o script
    die();
}
?>

Lembre-se que isso já foi detalhado na aula: PDO em PHP.

envia_clientes.php

Nosso arquivo que vai enviar os dados para a base de dados MySQL é o envia_clientes.php, vamos validar os dados enviados passo a passo para você entender.

Nossa verificação será feita ao contrário, ou seja, ao invés de verificar se algo está correto, vamos verificar se algo NÃO está correto. Caso algo não passe na validação, matamos o script PHP com exit.

A primeira verificação é para saber se os dados foram enviados.

// Se não postar nada
if ( ! isset( $_POST ) || empty( $_POST ) ) {
	
	// Mensagem para o usuário
	echo 'Nada a publicar!';
	
	// Mata o script
	exit;
}

Em nossa segunda verificação, vamos ver se existe algum campo em branco.

// Verifica campos em branco
foreach ( $_POST as $chave => $valor ) {
	// Cria as variáveis dinamicamente
	$$chave = $valor;
	
	// Verifica campos em branco
	if ( empty( $valor ) ) {
		// Mensagem para o usuário
		echo 'Existem campos em branco.';
		
		// Mata o script
		exit;
	}
}

Agora vamos verificar se todas as variáveis que precisamos estão definidas:

// Verifica se todas as variáveis estão definidas
if (  
	   ! isset( $cliente_nome      )  
	|| ! isset( $cliente_sobrenome ) 
	|| ! isset( $cliente_idade     )
	|| ! isset( $cliente_sexo      )
) {
	// Mensagem para o usuário
	echo 'Existem variáveis não definidas.';

	// Mata o script
	exit;
}

Agora vamos enviar a imagem para uma pasta chamada imagens. Não vou validar a imagem nem entrar em detalhes sobre o envio, isso fica para uma próxima aula. Mesmo assim, segue o código:

// A imagem
$imagem = isset( $_FILES['cliente_foto'] ) ? $_FILES['cliente_foto'] : null;

// Verifica se existe imagem
if ( empty( $imagem ) ) {
	// Mensagem para o usuário
	echo 'Envie sua foto.';
	
	// Mata o script
	exit;
}

// Dados da imagem
$imagem_tmp   = $imagem['tmp_name'];
$nome_imagem  = $imagem['name'];
$diretorio    = '../imagens/';
$envia_imagem = $diretorio . $nome_imagem;

// Envia a foto
if ( ! move_uploaded_file( $imagem_tmp , $envia_imagem ) ) {
	// Mensagem para o usuário
	echo 'Erro ao enviar foto.';
	
	// Mata o script
	exit;
}

Agora podemos incluir nosso arquivo de conexão PDO:

// Inclui o arquivo de conexão
include('pdo.php');

E enviar os dados para a base de dados:

// Prepara o envio
$prepara = $conexao_pdo->prepare("
	INSERT INTO `clientes`.`dados_clientes` (
		`cliente_nome`,
		`cliente_sobrenome`,
		`cliente_idade`,
		`cliente_sexo`,
		`cliente_foto`
	) 
	VALUES
	( ?, ?, ?, ?, ? )
");

// Envia
$verifica = $prepara->execute(
	array(
		$cliente_nome,
		$cliente_sobrenome,
		$cliente_idade,
		$cliente_sexo,
		$envia_imagem
	)
);

Para verificar se os dados foram incluídos com sucesso, simplesmente faça:

if ( $verifica ) {
	echo 'OK';
	
	// Mata o script
	exit;
} else {
	echo 'Erro ao enviar dados.';
	
	// Mata o script
	exit;
}

Pronto, a parte mais complicada passou, agora vamos ver o Ajax e jQuery.

jQuery / Ajax

Agora vamos melhorar um pouco nosso formulário com jQuery e Ajax.

A primeira coisa a fazer, é baixar o jQuery e adicionar o script em nosso HTML. Faça o download em:

Vamos utilizar a versão 1.11.1.

Incluindo os arquivos .js no HTML

Além do jQuery, vamos criar nosso próprio script, chamado scripts.js. Tanto o arquivo jquery-1.11.1.min.js quanto scripts.js estarão em uma pasta chamada js.

Depois de colocar todos os arquivos na pasta js, inclua o seguinte no cabeçalho do seu HTML (entre <head> e </head>).

<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/scripts.js"></script>

Capturando o submit do formulário

Agora vamos escrever todo o nosso código dentro do arquivo scripts.js. Para capturar e anular o submit do formulário, faça o seguinte:

// Inicia o jQuery
$(function(){
	$('.form_clientes').submit(function(){
		
		// O restante virá aqui
		
		// Anula o envio convencional
		return false;
	});
});

Perceba que agora podemos manipular todos os dados do formulário, e enviar com Ajax, já que agora a página não será mais atualizada.

Para nosso exemplo, vamos fazer milhares de verificações (todas testadas por mim), veja abaixo:

// Inicia o jQuery
$(function(){

	// Cria uma variável que vamos utilizar para verificar se o
	// formulário está sendo enviado
	var enviando_formulario = false;
	
	// Captura o evento de submit do formulário
	$('.form_clientes').submit(function(){
		
		// O objeto do formulário
		var obj = this;
		
		// O objeto jQuery do formulário
		var form = $(obj);
		
		// O botão de submit
		var submit_btn = $('.form_clientes :submit');
		
		// O valor do botão de submit
		var submit_btn_text = submit_btn.val();

		// Dados do formulário
		var dados = new FormData(obj);
		
		// Retorna o botão de submit ao seu estado natural
		function volta_submit() {
			// Remove o atributo desabilitado
			submit_btn.removeAttr('disabled');
			
			// Retorna o texto padrão do botão
			submit_btn.val(submit_btn_text);
			
			// Retorna o valor original (não estamos mais enviando)
			enviando_formulario = false;
		}
		
		// Não envia o formulário se já tiver algum envio
		if ( ! enviando_formulario  ) {		
		
			// Envia os dados com Ajax
			$.ajax({
				// Antes do envio
				beforeSend: function() {
					// Configura a variável enviando
					enviando_formulario = true;
					
					// Adiciona o atributo desabilitado no botão
					submit_btn.attr('disabled', true);
					
					// Modifica o texto do botão
					submit_btn.val('Enviando...');
					
					// Remove o erro (se existir)
					$('.error').remove();
				}, 
				
				// Captura a URL de envio do form
				url: form.attr('action'),
				
				// Captura o método de envio do form
				type: form.attr('method'),
				
				// Os dados do form
				data: dados,
				
				// Não processa os dados
				processData: false,
				
				// Não faz cache
				cache: false,
				
				// Não checa o tipo de conteúdo
				contentType: false,
				
				// Se enviado com sucesso
				success: function( data ) {	
					volta_submit();
					
					// Se os dados forem enviados com sucesso
					if ( data == 'OK' ) {
						// Os dados foram enviados
						// Aqui você pode fazer o que quiser
						alert('Dados enviados com sucesso');
					} else {
						// Se não, apresenta o erro perto do botão de envio
						submit_btn.before('<p class="error">' + data + '</p>');
					}
				},
				// Se der algum problema
				error: function (request, status, error) {
					// Volta o botão de submit
					volta_submit();
					
					// E alerta o erro
					alert(request.responseText);
				}
			});
		}
		
		// Anula o envio convencional
		return false;
		
	});
});

Minha maior preocupação é o cliente enviar o formulário mais de uma vez quando o servidor estiver lento, por isso, tivemos tantas verificações.

Vídeo tutorial

Eu já criei um vídeo tutorial detalhando como enviar formulário com jQuery e Ajax, porém, era um pouco diferente, pois, enviamos apenas texto. Neste caso, ao invés de utilizarmos "FormData", utilizamos serialize (bem mais simples).

Mesmo assim, assista ao vídeo abaixo, pode tirar algumas dúvidas que você venha a ter.

Espero que ajude.

Download

Caso queira baixar o formulário criado nessa aula (com base de dados e tudo mais), basta clicar no link abaixo:

Você precisará importar a base de dados para seu servidor MySQL.

Concluindo

Este tutorial detalha bastante tudo o que costumo utilizar quando envio formulários com Ajax, porém, o lado do PHP ainda faltam algumas validações, como a validação da imagem, por exemplo.

Ainda vamos escrever muitos tutoriais para que você entenda melhor o processo, porém, se tiver dúvidas é só perguntar.

Sempre que publicamos formulários em qualquer tipo de site, nossa primeira preocupação é com a validação dos dados, tanto para front quanto back-end. Com a introdução do HTML5 e a grande adoção dos navegadores de ponta à nova tecnologia, atualmente está muito mais fácil trabalhar com formulários para desenvolvedores front-end.

Existem novos tipos de inputs e novos atributos nos formulários HTML5 voltados para a validação de dados. Além disso, o melhor da história é que você não vai precisar ficar bolando planos mirabolantes com JavaScript para não frustrar o usuário final. A validação será realizada pelo próprio HTML5, nativamente.

Vamos ver como isso funciona na prática.

O atributo required

Todos os formulários que criei até hoje, em todas as minhas aplicações, têm campos com preenchimento obrigatório. O atributo required está aqui para facilitar sua vida nesse sentido.

Ele simplesmente não envia o formulário se o usuário não preencher o campo.

Veja um exemplo:

<form action="" method="post">
  <p>Nome: <br> <input type="text" name="nome" required></p>
  <p>Sobrenome: <br> <input type="text" name="sobrenome" required></p>
  <p>Idade: <br> <input type="text" name="idade" required></p>
  <p><input type="submit" Value="Enviar"></p>
</form>

Como você pode ver, basta incluir o atributo "required" e pronto, o navegador fará sua tarefa.

required

Cada navegador trata a informação (Por favor, preencha este campo) à sua maneira, mas uma coisa é certa, o formulário não será enviado enquanto o campo não for preenchido.

Novos tipos de inputs

Se você já desenvolve a bastante tempo, sabe que o único tipo de input de texto que tínhamos era o "text" (texto). Porém, com HTML5, agora temos dezenas de novos tipos de inputs, como email, url, number, tel, color, date.

Por exemplo:

<form action="" method="post">
  <p>regexp: <br> <input type="text" name="regexp"pattern="[A-Z-a-z0-9]{10}" required></p>
  <p>email: <br> <input type="email" name="email" required></p>
  <p>url: <br> <input type="url" name="url" required ></p>
  <p>number: <br> <input type="number" name="number" required></p>
  <p>tel: <br> <input type="tel" name="tel" required></p>
  <p>date: <br> <input type="date" name="date" required></p>
  <p>datetime: <br> <input type="datetime" name="datetime" required></p>
  <p>datetime-local: <br> <input type="datetime-local" name="datetime-local" required></p>
  <p>month: <br> <input type="month" name="month" required></p>
  <p>week: <br> <input type="week" name="week" required></p>
  <p>color: <br> <input type="color" name="color" required></p>
  <p>time: <br> <input type="time" name="time" required></p>
  <p>search: <br> <input type="search" name="search" required></p>
  <p>range: <br> <input type="range" min="0" max="5" value="1" name="range" required></p>
  <p><input type="submit" Value="Enviar"></p>
</form>

Alguns desses tipos, como "date", por exemplo, ainda não são suportados por todos os navegadores.

Além disso, dependendo do tipo de input, seu estilo pode ficar um pouco diferente dos demais textos que conhecemos, veja um exemplo do formulário acima aqui.

novos inputs

Você pode ver como utilizar todos os tipos de inputs HTML5 aqui.

Placeholder

Outro ponto que sempre utilizei a minha vida toda como desenvolvedor, foi um texto que fica dentro do input indicando o que o usuário deve digitar (Isso se chama placeholder), por exemplo:

<p>email: <br> <input type="email" placeholder="digite seu email" name="email" required></p>

Uma mensagem de texto aparece dentro do input antes que o usuário comece a digitar.

placeholder

Quando ele digita qualquer coisa, o texto desaparece, dando lugar ao que ele está digitando.

Não se esqueça do back-end

Normalmente, foco mais na validação utilizando PHP, ou qualquer outra linguagem de back-end, pois, é lá que os dados precisam ser tratados. A utilização de HTML5 (ou JavaScript, como antigamente), é simplesmente para que o seu usuário final tenha uma experiência legal com seu site, com mensagens, cores e tudo indicando o que ele deve fazer.

Por este motivo, nunca trate apenas do estilo e das coisas que você vê. Além de tratar os valores no front-end com qualquer ferramenta, nunca se esqueça de validar os dados que vão para o servidor também.

E o CSS?

Para estilizar os inputs com determinados atributos, basta fazer o seguinte:

required

Para o atributo required, basta adicionar a pseudo classe :required, veja:

input:required{
  border:1px solid blue;
}

required inválido

Se o campo for enviado e estiver inválido, utilize as pseudo classes :invalid ou :valid, veja:

input:required:invalid, input:focus:invalid { 
  background: red;
}
input:required:valid { 
  background: blue;
}

Claro que você vai escolher um estilo adequado, já que meu exemplo acima é extremamente horrível.

Placeholder

Já criamos um tutorial bem detalhado como estilizar placeholders aqui no tutsup. Veja em:

Concluindo

Claro que não cobri tudo o que você pode saber sobre os formulários HTML5, porém, na maioria das vezes, é o que eu utilizo em minhas próprias aplicações.

Conforme descrevi ao longo do artigo, a preocupação maior é com o back-end (PHP, por exemplo), o front-end (HTML5, por exemplo) é para melhorar a experiência do usuário final.

Saiba mais no site da W3C.

Algo a declarar?

Estilizar placeholder de inputs é relativamente simples, porém, existem alguns truques que devem ser seguidos para que a solução funcione corretamente em todos os navegadores.

Primeiramente, vamos falar da maravilha que o placeholder faz quando tratamos de formulários e inputs.

Provavelmente você deve se lembrar de ter visto dicas que ficam dentro dos inputs como texto, e, assim que você começa a digitar, o texto simplesmente desaparece, dando lugar ao conteúdo requerido por tal input.

Por exemplo, se tentarmos acessar o site outlook.com da Microsoft sem ter feito login, veja como os campos e-mail e senha aparecem:

Input do site Outlook.com

E se eu digitar meu e-mail e senha, aquele texto de exemplo simplesmente desaparece:

Input do site Outlook.com Preenchido

Antigamente, tínhamos que escrever algumas linhas de código Javascript (um tanto confusas) para que isso funcionasse perfeitamente. Atualmente, isso pode ser feito com um simples atributo, o placeholder.

<input type="email" class="input-class" placeholder="Digite seu e-mail" required>

Perceba o atributo placeholder, que exibe o texto "Digite seu e-mail". Ele faz a mesma coisa que o exemplo anterior, simplesmente desaparece quando o usuário começa a digitar o texto.

O problema é: "Como estilizar placeholder de inputs?".

A solução é simples, veja:

/* Chrome, Safari, Opera */
::-webkit-input-placeholder {}

/* Firefox 18- */
:-moz-placeholder {}

/* Firefox 19+ */
::-moz-placeholder {}

/* IE10+ */
:-ms-input-placeholder {}

Infelizmente temos que utilizar os prefixos dos navegadores, e pior, não da para agrupar em uma única regra, pois, se um navegador não reconhecer uma das regras, ele vai pular todo o trecho de código.

Veja um exemplo real.

O HTML

<input type="text" class="input-class" placeholder="Name" required>
<input type="text" class="input-class" placeholder="Surname" required>
<input type="email" class="input-class" placeholder="Email" required>
<input type="text" class="input-class" placeholder="Phone" required>

O CSS

.input-class {
  padding: 5px;
  text-transform: uppercase;
  width: 150px;
  border: 1px solid #6db5f1;
  -webkit-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
  margin: 10px auto;
  display: block;
}

.input-class:focus {
  box-shadow: 0 0 5px #6db5f1;
  width: 250px;
}

.input-class::-webkit-input-placeholder { /* Chrome, Safari, Opera */
  color: #6db5f1;
  font-style: italic;
}

.input-class:-moz-placeholder { /* Firefox 18- */
  color: #6db5f1;
  font-style: italic;
  opacity: 1;
}

.input-class::-moz-placeholder {  /* Firefox 19+ */
  color: #6db5f1;
  font-style: italic;
  opacity: 1;
}

.input-class:-ms-input-placeholder { /* IE10+ */ 
  color: #6db5f1;
  font-style: italic; 
}

O exemplo acima deverá retornar o mesmo que o Codepen abaixo:

Codepen1

Veja também que para o Firefox, precisamos configurar a opacidade para 1, pois, caso não faça isso, a cor que você escolher vai ficar um pouco mais apagada.

opacity: 1;

Espero ter sido útil.

Recentemente, um cliente me pediu para criar um tema para um site de poemas. Nele não haveria barra lateral, apenas texto e imagens, e um menu superior simples. Então ele me pediu para ver o que eu podia fazer para dar um toque a mais nesse layout tão simples.

Meu primeiro pensamento foi focar na tipografia, ou seja, escolher uma fonte agradável para leitura, que funcione bem tanto em dispositivos móveis quanto em desktops.

Depois de alguns testes, percebi que ainda faltava algo, o site parecia realmente muito simples, sem emoção nenhuma.

Foi aí que tive a ideia de fazer com que as imagens ficassem na largura da página, porém, manter o texto em um tamanho fixo alinhado ao centro da tela.

Achei muito interessante o resultado, veja um exemplo que fiz no Codepen para entender sobre o que estou falando.

Depois de alguns testes, achei que a solução acima ficou mais simples, direta, e sem nenhum truque (leia-se gambiarra).

No tutorial abaixo vou explicar o que foi que fiz com o CSS. Você vai ver que não tem nenhum segredo.

Imagem com largura máxima dentro do post

Normalmente, quando temos posts em qualquer plataforma (seja Blogger, WordPress, Joomla, Drupal, site criado por você mesmo), a estrutura HTML é mais ou menos assim:

<div class="texto">
	<h1>Título principal</h1>
	<p>
		Lorem ipsum dolor sit amet, 
		consectetur adipiscing elit. 
		Pellentesque id auctor nibh, non euismod sem. 
		Aenean vehicula mattis mauris vitae malesuada.
	</p>
	<p>
		Lorem ipsum dolor sit amet, 
		consectetur adipiscing elit. 
		Pellentesque id auctor nibh, non euismod sem. 
		Aenean vehicula mattis mauris vitae malesuada.
	</p>
	<div class="pai_imagem">
		<img src="http://www.todoespacoonline.com/w/wp-content/uploads/2014/07/cookies-em-php.jpg" alt="titulo">
	</div>
	<p>
		Lorem ipsum dolor sit amet, 
		consectetur adipiscing elit. 
		Pellentesque id auctor nibh, non euismod sem. 
		Aenean vehicula mattis mauris vitae malesuada.
	</p>
</div>

Ou seja, nada mais do que um elemento pai envolvendo tudo o que está no artigo. Parágrafos, títulos, imagens e o resto.

Se você conseguir capturar a classe do elemento que envolve as imagens, melhor ainda, assim não terá que alterar nada no texto.

Para que as imagens fiquem com 100% da largura da tela, e o texto alinhado ao centro utilizando CSS, podemos definir a largura do elemento pai em 100%, e o que estiver dentro dele em 50%. (Lembre-se de utilizar box-sizing: border-box;).

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  color: #333;
}
.texto{
	width: 100%;
	font-family: 'Lato', sans-serif;
	font-weight: 300;
	font-size: 21px;
	line-height: 1.5;
	padding: 20px 0;
	margin: 20px 0;
}
.texto * {
  max-width: 50%;
  margin: 0 auto;
}

Agora é só acertar a imagem e seu elemento pai para a largura de 100%, sobrescrevendo a regra anterior.

@media only screen
and (max-width : 767px) {
	.texto * {
		max-width: 90%;
		margin: 0 auto;
	}
}

.texto img {
  max-width: 100%;
  margin: 1em auto;
}
.texto .pai_imagem {
  max-width: 100%;
}

Neste caso, estamos confiando na especificidade CSS.

Veja novamente um exemplo do que foi descrito no artigo acima:

Caso tenha melhores soluções, deixe nos comentários. Será de grande utilidade para todos.

Com dúvidas sobre como criar seus sites com a nova estrutura HTML5? Não se preocupe, vamos falar exatamente sobre isso. Além da estrutura, também vou passar um método para a criação de microdata (schema.org), o que vai melhorar a pontuação de SEO do seu site.

Então vamos lá.

Estrutura HTML5

Antigamente, quando íamos criar nossos templates HTML, fazíamos algo parecido com o trecho abaixo:

<body>
	<div class="main">
		<div class="header"></div>
		<div class="menu"></div>
		<div class="article"></div>
		<div class="sidebar"></div>
		<div class="footer"></div>
	</div>
</body>

Ou seja, uma série de DIVs, uns dentro dos outros, que são diferenciados por classes ou IDs.

Atualmente já temos tags com nomes corretos para cada uma das áreas, veja o mesmo exemplo acima em HTML5.

<body>
	<main role="main">
		<header class="header"></header>
		<nav class="menu"></nav>
		<article class="article"></article>
		<aside class="sidebar"></aside>
		<footer class="footer"></footer>
	</main>
</body>

Isso melhora drasticamente a semântica do nosso HTML.

Mas vamos entender melhor o que cada classe faz.

  • <main> – Essa é a tag principal do seu site, ou seja, deve ser utilizada apenas uma vez apontando para o conteúdo principal da página. Nada que repete em todas as páginas do site deve ser incluído nessa tag, como logos, nome do site, navegação e coisas do tipo. Em um blog, essa tag representaria o conteúdo do artigo principal, que é diferente para cada página.
  • <header> – Essa tag pode ser apresentada como um cabeçalho sozinho, ou para um cabeçalho de outra tag, como section e/ou article. Você pode ter quantos cabeçalhos preferir dentro do seu documento, e deve utilizar as tags de heading (de H1 até H6) dentro da mesma.
  • <nav> – Essa tag representa um grupo de links de navegação (geralmente menus).
  • <aside> – Essa tag pode ser um conteúdo relacionado ao artigo (quando dentro da tag article), ou conteúdo que não é relacionado ao artigo, como barras laterais, anúncios e coisas do tipo (quando fora da tag article).
  • <article> – Essa tag representa um artigo, um texto, um post de um blog, um post em um fórum e coisas do tipo. Dentro dela é necessário ter um cabeçalho (<header>) e as tags de heading (H1 até H6). Você pode aninhar tags article, o que seria algo como um texto dentro do artigo.
  • <time> – Representa uma data. O atributo "datetime" deve indicar uma data no padrão correto.
  • <footer> – Essa tag representa o rodapé de um artigo, ou do site como um todo. Você pode utilizar quantos rodapés preferir dentro da estrutura HTML5.
  • <section> – Essa tag serve para agrupar conteúdo do mesmo tipo (parecida com <div>). Você pode ter quantas sessões quiser na sua estrutura HTML5. Ela deve receber um cabeçalho e tags de H1 – H2.

Mas como isso funciona na prática? Vamos ver.

Estrutura HTML5 com Microdata pronta

Veja um exemplo de um blog em HTML5:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		
		<link rel="stylesheet" href="css/style.css">
		
		<script src="js/html5.js"></script>

		<title>Estrutura HTML5 - Tutsup</title>
	</head>
	<body>
		<!-- Header principal -->
		<header>
			<h1>Precisa existir um h1 aqui.</h1>
			<p>Conteúdo (Opcional)</p>
		</header>
		
		<!-- Menu -->
		<nav>
			<ul>
				<li><a href="#">Item</a></li>
				<li><a href="#">Item</a></li>
				<li><a href="#">Item</a></li>
				<li><a href="#">Item</a></li>
			</ul>
		</nav>
		
		<!-- Barra lateral -->
		<aside class="sidebar">
			<h2>Sidebar (Opcional)</h2>
			<p>Conteúdo da Sidebar</p>
		</aside>
		
		<!-- Parte principal do site -->
		<main role="main">
			<!-- Artigo -->
			<article role="article" itemscope itemtype="http://schema.org/BlogPosting">
				<header>
					<h2 itemprop="headline">
						<a href="#" itemprop="url">
							Título do artigo
						</a>
					</h2>
				</header>
				
				<!-- Data da publicação -->
				<time itemprop="datePublished" datetime="2014-07-14">Segunda-feira, 14 de Julho de 2014</time>
				
				<!-- Imagem em destaque (Opcional) -->
				<img src="exemplo.jpg" alt="Nome da imagem" itemprop="image" />
				
				<!-- Descrição (Opcional) -->
				<div itemprop="description">Descrição do artigo.</div>
				
				<!-- Texto HTML do artigo -->
				<div class="post" itemprop="articleBody">O HTML do artigo vem aqui.</div>
				
				<!-- Sessão do autor -->
				<footer itemprop="author" itemscope itemtype="http://schema.org/Person">
					<h3 itemprop="name">Nome do autor</h3>
					<p itemprop="description">Biografia do autor.</p>
				</footer>
			</article> <!-- Fim do primeiro artigo -->
		</main>
		
		<!-- Barra lateral -->
		<aside class="sidebar">
			<h2>Outra Sidebar (Opcional)</h2>
			<p>Conteúdo da Sidebar</p>
		</aside>
		
		<!-- Conteúdo do rodapé -->
		<footer>
			Conteúdo do rodapé vem aqui
		</footer>
	</body>
</html>

No exemplo acima, teríamos um cabeçalho, um menu, uma barra lateral, um artigo principal, outra barra lateral, e um rodapé. Veja na imagem abaixo o exemplo:

  Exemplo de estrutura HTML5

Perceba que já incluí os dados de microdata para um blog (https://schema.org/BlogPosting), você pode alterar como preferir, porém, mantenha a estrutura.

Além disso, evite utilizar mais de um <h1> por página, isso pode atrapalhar os mecanismos de pesquisa a entender qual é o título principal da página.

Download da estrutura HTML5 acima

Se você quiser baixar o exemplo acima, já com CSS, o script HTML5 Shiv v3.7.0 para que as tags HTML5 funcionem nos navegadores mais antigos, e microdata, utilize o link abaixo:

Qualquer dúvida é só falar.

Provavelmente você já deve ter visto algum site utilizando vídeo como background pela Internet a fora, porém, já parou para pensar como isso é feito?

Na verdade o que você vê, normalmente não é um background em si, mas o elemento video do HTML5 com posição fixa e tamanho que ocupa a tela inteira.

Nesse artigo vamos fazer exatamente isso: colocar um vídeo como background de um elemento qualquer (tela inteira) utilizando apenas HTML5 e CSS.

Exemplo de vídeo como background em HTML e CSS

Você pode ver um exemplo do que vamos fazer no link abaixo:

Você também pode baixar o exemplo acima no link abaixo:

Então vamos lá…

O vídeo

Antes que você comece a colocar a mão na massa, deve saber algumas coisas sobre o vídeo que você vai colocar como background no seu código.

Primeiramente, você tem que ter pelo menos dois formatos do vídeo que deseja utilizar, um em MP4 e outro em WebM. Para entender o motivo basta ler sobre vídeos em HTML5 na W3Schools.

Normalmente utilizo o Adobe Premiere para editar e exportar os vídeos que utilizo, no entanto, ele não exporta WebM por padrão. Se você também utiliza o Adobe Premiere, existe um plugin que faz o serviço por você.

Não vou entrar muito em detalhes sobre edição e exportação de vídeos aqui, pois isso foge ao escopo do artigo, mas, se você tiver alguma dúvida e quiser perguntar, basta deixar um comentário; se soubermos, ajudaremos.

Para este tutorial vamos utilizar apenas os dois formatos mencionados anteriormente.

Seu vídeo vai ficar em loop (executando sem parar), portanto, tente encontrar algo que não seja cansativo ou estressante. Um vídeo de cerca de 15 segundos é o suficiente.

Não se esqueça de remover o áudio do vídeo, isso vai lhe poupar algumas linhas de código para colocar o vídeo em mudo, caso você esqueça.

O HTML

O HTML não tem muito segredo, simplesmente utilize a tag de vídeo do HTML5, como manda a bula.

<video autoplay loop poster="images/torres.jpg" class="bg_video">
	<source src="videos/bg.webm" type="video/webm">
	<source src="videos/bg.mp4" type="video/mp4">
</video>	

Depois disso, você pode fazer o que quiser com seu HTML, crie seus DIVs, sessions, articles ou o que desejar.

O CSS

Agora você precisa colocar um CSS na classe do seu vídeo. É exatamente isso que vai deixá-lo parecido com um background.

Vamos garantir que o elemento tenha posição fixa, largura e altura mínimas de 100%, nenhuma distância da margem da janela.

Veja como fica:

.bg_video{
	position: fixed; 
	right: 0; 
	bottom: 0;
	min-width: 100%; 
	min-height: 100%;
	width: auto; 
	height: auto; 
	z-index: -1000;
	background: url(images/torre.jpg) no-repeat;
	background-size: cover; 
}

A imagem de background é um fallback para os navegadores que não suportam vídeo em HTML5. Lembre-se de colocar uma imagem que seja atrativa, pois, ainda existem muitos navegadores que não suportam vídeo.

O HTML e CSS completos

Se você quiser copiar e colar no seu editor de textos para testar, segue abaixo o código completo:

<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		
		<title>HTML5 Background Video - Torre Eiffel - TutsUP</title>
		
		<style>
		*{
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}
		body, html{
			width: 100%;
			height: 100%;
			font-family: sans-serif;
			font-size:22px;
			line-height: 1.3;
		}
		.bg_video{
			position: fixed; 
			right: 0; 
			bottom: 0;
			min-width: 100%; 
			min-height: 100%;
			width: auto; 
			height: auto; 
			z-index: -1000;
			background: url(images/torre.jpg) no-repeat;
			background-size: cover; 
		}
		.body{
			padding:20px;
			background: rgba(255,255,255,0.9);
			margin: 30% auto 20px auto;
			max-width: 960px;
			border-radius: 10px;
		}
		.body h1{
			font-family: Georgia, serif;
			font-size:40px;
		}
		.body p{
			margin: 1.6em 0;
		}
		</style>
		
		
	</head>

	<body>
		<video autoplay loop poster="polina.jpg" class="bg_video">
			<source src="videos/bg.webm" type="video/webm">
			<source src="videos/bg.mp4" type="video/mp4">
		</video>	
		<div class="body">
			<h1>Torre Eiffel</h1>
			<p>Seu texto!</p>
		</div>
	</body>
</html>

Concluindo

Tenha cautela em utilizar esse tipo de tática, um vídeo pode pesar muito o seu layout caso não tenha sido codificado adequadamente. Não o utilize se não for extremamente necessário para seu layout.

No demais, essa tática funciona perfeitamente com os navegadores mais novos.

Em caso de dúvidas, só comentar aí abaixo.

Todo bom projeto tem um certo padrão de codificação, que é o que vai tratar da maneira como seu código deve ser escrito, seja por um espaço a mais, pelo método que as chaves são colocadas nas estruturas condicionais, nos laços, e assim por diante…

Com o WordPress isso não é diferente, existem padrões de escrita para PHP, HTML, CSS e JavaScript, portanto, se você deseja começar a desenvolver temas e plugins, ou até mesmo se envolver com o projeto do CMS, deverá se educar para escrever seus códigos exatamente como os padrões de codificação WordPress exigem.

Neste artigo vamos tratar de todas as linguagens utilizadas no WordPress, tanto para desenvolvedores front-end quanto back-end.

PHP no WordPress

Como o WordPress é feito em PHP, desenvolvedores que sabem essa linguagem estão "em casa" quanto ao desenvolvimento, porém, é necessário seguir alguns princípios na hora de escrever seu código.

Veja abaixo.

Aspas simples e aspas duplas

Você deve utilizar aspas simples e duplas de maneira apropriada. Se não estiver avaliando nenhum valor, você deve utilizar aspas simples:

$string = 'Este é o meu valor!';

Caso contrário, é necessário utilizar aspas duplas:

$string = "O valor é $valor!";

Evite ao máximo escapar aspas com uma barra invertida, tenha em mente que isso faz seu código ficar difícil para ser lido e manipulado, além de feio.

Textos que vão em atributos HTML devem ser executados através de esc_attr(), que vai tratar os valores para evitar que aspas (ambas, as duplas e simples), sinal de maior que (>), sinal de menor que (<) e o "E" comercial (&), invalidem seu HTML.

Indentação

A indentação do seu código deverá ser feita sempre utilizando tabs, nunca espaços:

if ( 2 === $valor ) {
[tab]echo 'O valor é 2.';
[tab]echo 'Um mais um é 2.';
[tab]echo 'Quatro menos 2 é 2.';
}

Uma exceção seria quando você precisa alinhar os valores de um array para que o código fique mais bonito:

$array = array(
	'um'     => 1,
	'dois'   => 2,
	'três'   => 3,
	'quatro' => 4,
);

Um regrinha para não esquecer: Utilize tabs no início e espaços no meio das linhas para alinhamento.

Estilo das chaves

Todos os blocos (até os que não exigem) devem conter as chaves, exemplo:

if ( 1 === $valor ) {
	algumacoisa();
} else if ( 2 === $valor ) {
	algumacoisa();
	algumacoisa();
	algumacoisa();
} else {
	// Ação padrão
}

Se você tiver um bloco muito longo, considere dividi-lo em partes menores, ou em funções. Caso tenha realmente a necessidade de utilizar um bloco com mais de 35 linhas, faça um breve comentário na chave que fecha o bloco, para que qualquer desenvolvedor consiga identificar que aquela chave é daquele bloco, apenas lendo o final do mesmo.

// Verifica o valor
if ( 1 === $valor ) {
	/** 
	 *
	 * Meu bloco muito longo ...
	 *
	 **/
} // Verifica o valor

No demais, utilize sempre chaves em tudo que as requer:

if ( $condicao ) {
	acao();
}
 
if ( $condicao ) {
    acao();
} elseif ( $condicao ) {
    acao();
    acao();
}
 
foreach ( $itens as $item ) {
	processa_item( $item );
}

Expressões regulares

Expressões regulares compatíveis com o Perl (PCRE) devem ser utilizadas ao invés de POSIX. Nunca use o modificador /e, em vez disso, use preg_replace_callback.

short_open_tag: <? e ?>

Nunca, de maneira alguma, utilize as tags <? e ?>. Sempre utilize a tag do PHP completa <?php.

<?
$errado = "Nunca faça isso!";
?>

<?php
$agora_sim = 'Aqui está tudo correto!';
?>

Não deixe sobrar espaços no final

Normalmente, quando escrevemos códigos em PHP, costumamos fechar a última tag ?> do código, mesmo sabendo que ela não é necessária:

<?php
$agora_sim = 'Aqui está tudo correto!';

echo $agora_sim;

// Este código funciona e não deixa sobrar espaços no final

O trecho acima funciona mesmo sem a última tag do PHP, além disso, evita que sobrem espaços no final do nosso arquivo, o que não é permitido pelos padrões de codificação do WordPress.

Se o seu trecho terminar com a tag de fechamento do PHP, ou até em HTML, CSS ou Javascript, certifique-se de remover os espaços que sobrarem ao final da sua última linha de código. Se eles não são necessários, não há motivos para tê-los.

Uso de espaços

Você deve utilizar espaços depois de vírgulas e entre os parênteses:

$array = array( 1, 2, 3 );

Depois das chamadas dos laços e estruturas condicionais:

if[Espaço]( $condicao )[Espaço]{
	acao();
}

Exemplos:

if ( ... ) {
	...
}

foreach ( ... ) {
	...
}

while ( ... ) { 
	...
}

Para comparações, não coloque valores encostados nos operadores, exemplo:

if ( $x === $y && $y !=== $z ) {
	// Correto
}

Para concatenação, não coloque valores encostados no ponto (.):

$valor_1 = 'Valor 1 ';
$valor_2 = 'Valor 2 ';

// Correto
echo $valor_1 . $valor_2;

Para definir uma função, faça da seguinte maneira:

function funcao( $parametro_1 = 'valor 1', $parametro_2 = 'valor 2' ) {
    // Ação
}

Para chamar uma função, faça da seguinte maneira:

funcao( $parametro_1, func_param( $parametro_2 ) );

Para Type Casting, faça da seguinte maneira:

$numero = (integer) 10;
$foo = (boolean) $bar;

Para itens de um array, faça o seguinte:

<?php
$x = $foo['bar']; // correto
$x = $foo[ 'bar' ]; // incorreto
 
$x = $foo[0]; // correto
$x = $foo[ 0 ]; // incorreto
 
$x = $foo[ $bar ]; // correto
$x = $foo[$bar]; // incorreto

Convenções de nome

Sempre utilize letras minúsculas quando criar variáveis:

$variavel = 'Valor qualquer';

Para variáveis com nome composto, separe as palavras por um undeline (_):

$nome_da_variavel = 'Valor qualquer';

A mesma regra serve para funções:

function minha_funcao( $meu_parametro ) {
	...
}

Em caso de classes, utilize a primeira letra de cada palavra em maiúsculo. Se a palavra for um acrônimo, todas as letras devem ser maiúsculas:

class Walker_Category extends Walker { 
    ...
}

class WP_HTTP {
    ....
}

Os arquivos devem ser nomeados de maneira descritiva, com palavras separadas por um hífen:

nome-do-meu-plugin.php

Os arquivos das classes devem iniciar com a palavra class-, seguida do nome da classe com letras minúsculas. Exemplo:

class-wp-http.php

Arquivos contendo template tags dentro da pasta wp-includes, devem ter -templace ao final. Por exemplo:

general-template.php

Prefira argumentos autoexplicativos para funções

Se eu chamar a função abaixo:

comer('Arroz', true);

Apenas lendo o trecho acima você seria capaz de me dizer o que significam os dois parâmetros? Certo, comer (entendi o nome da função), 'Arroz' (beleza, comer arroz), mas e o segundo parâmetro? O que significa é o true.

Ao invés disso, eu poderia criar a minha função sem o uso desse booleano, o que traria muito mais sentido para quem fosse utilizar meu código, exemplo:

function comer( $comida = 'Arroz', $velocidade = 'Devagar' ) {
	... 
}

comer(); // Arroz, Devagar
comer('Feijão'); // Feijão, Devagar
comer('Churrasco', 'Rápido'); // Churrasco, Rápido

Isso facilita a vida de todo mundo.

Operador ternário

Sempre utilize o operador ternário para testar condições verdadeiras, nunca falsas. Por exemplo:

// (if condição verdadeira ) ? (faça isso) : (se não, faça isso);
$musica = ( 'rock' == $musica ) ? 'Legal' : 'Blah!';

Apenas teste uma condição falsa em caso de valores nulos e para verificar se variáveis estão setadas, exemplo:

if ( ! empty( $variavel ) ) {
	// A variável não está vazia
}

Mesmo assim, o trecho acima ainda causa uns 3 segundos de confusão na sua mente.

Yoda Conditions

Quando você está fazendo comparações, também está correndo um sério risco de esquecer o segundo sinal de igual, acabando por atribuir o valor comparado ao valor da variável, e fazendo a condição se tornar verdadeira. Veja um exemplo:

if ( $usuario = 'Admin' ) {
	// Pronto, agora a condição é verdadeira
	// e o usuário é o 'Admin'
}

Para evitar este problema, você pode utilizar este método, que consiste em inverter o valor comparado para a esquerda:

if ( 'Admin' === $usuario ) {
	// Agora sim
}

if ( true === $valor ) {
	// ...
}

No trecho acima, se você esquecer dos outros sinais de igual, pelo menos terá um erro:

Parse error: syntax error, unexpected '=' in local/do/arquivo.php on line N

É! Eu sei que seu código vai ficar meio estranho para ser lido, mas você acostuma.

Faça as coisas de maneira simples

Evite fazer as coisas de maneira complicada para outros desenvolvedores, veja:

$variavel = 'Um valor qualquer!';

isset( $variavel ) || $variavel = function() {
	return 'Muito importante!';
};

echo ! is_callable( $variavel ) ? $variavel : $variavel();

Mesmo que você seja um programador avançado, provavelmente vai levar alguns segundos para saber o que o trecho de código acima faz, e o pior, saber o porquê dele existir.

Seria muito mais simples se eu fizesse o seguinte:

if ( ! isset( $variavel ) ) {
	$variavel = function() {
		return 'Muito importante!';
	};
} else {
	$variavel = 'Um valor qualquer!';
}

echo is_callable( $variavel ) ? $variavel() : $variavel;

Pronto, agora o código está autoexplicativo: se a variável não estiver setada, ela é uma função; se já, ela tem um valor qualquer. Na exibição, eu apenas verifico se é uma função ou se é uma variável comum.

Documentação

Sempre documente seus arquivos, funções, classes e qualquer outra parte do seu código que você achar que deve ser comentada, pois, ninguém vai entender que aquela nova função que você criou, é para corrigir aquele bug que você encontrou ao executar o seu código. Às vezes, apenas um comentário simples, facilita a vida de qualquer desenvolvedor.

O WordPress utiliza um método de documentação padrão. Você pode encontrar mais detalhes sobre isso em:

  • PHP Documentation Standards

Basta uma lida rápida e já vai saber como documentar seu código.

Fonte: PHP Coding Standards

HTML no WordPress

Para os padrões de codificação HTML no WordPress, basta seguir o que a W3C recomenda. Por este motivo, você deve utilizar um validador HTML para avaliar o seu código.

As tags que são fechadas em si mesmas, como <br />, devem ter um único espaço antes da barra, por exemplo:

<br /> <!-- Correto -->
<br/> <!-- Incorreto -->

Você pode encontrar mais detalhes sobre isso no site da W3C.

Atributos e Tags

Todas as tags e atributos devem ser escritos com letra minúscula, veja:

<b>Negrito</b> <!-- Correto -->
<B>Negrito</B>  <!-- Incorreto -->

Os atributos que serão interpretados por máquinas, também devem ser escritos com letra minúscula. A exceção aqui é que apenas os atributos que vão ser lidos por humanos, podem ser escritos da maneira que você preferir. Veja outro exemplo:

Para máquinas

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

Para humanos

<a href="http://exemplo.com/" title="Descrição Aqui">Exemplo.com</a>

Aspas

Todos os atributos devem estar entre aspas simples ou duplas, sem exceções:

<input type="text" name="email" disabled="disabled" /> <!-- Correto -->
<input type='text' name='email' disabled='disabled' /> <!-- Correto -->
<input type=text name=email disabled> <!-- Incorreto -->

Indentação

A indentação em HTML sempre deve refletir a estrutura do seu código utilizando tabs, não espaços.

Quando você estiver juntando PHP e HTML no seu arquivo, os trechos em PHP também devem ser indentados. Exemplo:

<?php if ( ! have_posts() ) : ?>
    <div id="post-1" class="post">
        <h1 class="entry-title">Not Found</h1>
        <div class="entry-content">
            <p>Apologies, but no results were found.</p>
            <?php get_search_form(); ?>
        </div>
    </div>
<?php endif; ?>

Fonte: HTML Coding Standards

CSS no WordPress

Crie um código que possa ser lido, que seja significativo, consistente e bonito.

  • Use tabs, não espaços, para recuar cada propriedade.
  • Adicione duas linhas em branco entre as seções e uma linha em branco entre blocos em uma seção.
  • Cada seletor deve estar em sua própria linha, que termina em uma vírgula ou uma chave. Pares de valor de uma propriedade devem estar em sua própria linha, com uma tab de recuo e um ponto e vírgula final. A chave de fechamento deve estar alinhada à esquerda, usando o mesmo nível de recuo do seletor de abertura.

Correto:

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

Incorreto:

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

Seletores

Tenha bom senso ao utilizar seletores, tente trabalhar corretamente com a especificidade do seu CSS.

/* Incorreto */
body div.classe {
	background: #fff;
}

/* Correto */
.classe {
	background: #fff;
}
  • Use letras minúsculas e palavras separadas por hifens ao nomear seletores. Evite camelcase e sublinhados.
  •  Use seletores legíveis que descrevem corretamente elemento
  • Seletores de atributo devem ter aspas em torno dos valores
  • Evite usar seletores super qualificados, div.container pode simplesmente ser declarado como .container

Veja exemplos do CSS correto e incorreto para o WordPress:

Correto

#comment-form {
    margin: 1em 0;
}
 
input[type="text"] {
    line-height: 1.1;
}

Incorreto

#commentForm { /* Não use camelcase. */
    margin: 0;
}
 
#comment_form { /* Não use underline. */
    margin: 0;
}
 
div#comment_form { /* Não super qualifique seletores. */
    margin: 0;
}
 
#c1-xr { /* O que é c1-xr?! Escolha um nome melhor. */
    margin: 0;
}
 
input[type=text] { /* Deveria ser [type="text"] */
    line-height: 100%
}

Propriedades

  • Propriedades devem ser seguidas por dois pontos e um espaço.
  • Todas as propriedades e valores devem estar em letras minúsculas, com exceção de nomes de fontes e propriedades específicas de cada desenvolvedor.
  • Use o código hexadecimal para cores, ou rgba() se opacidade for uma necessidade. Evite o formato RGB e letras maiúsculas nos hexadecimais. Encurte os valores quando possível: #fff, ao invés de #FFFFFF.
  • Use atalhos (exceto quando estiver substituindo estilos) para o background, border, font, list-style, margin, e valores de preenchimento, sempre que possível. (Para uma referência, consulte http://codex.wordpress.org/CSS_Shorthand).

Tente não ordenar suas propriedades e valores de maneira randômica, faça a ordenação dos valores de alguma forma que seja interessante para a semântica do seu arquivo.

Uma forma de ordenar as propriedades seria ordem alfabética, que é a mesma utilizada pela Automatic/WordPress.com. Veja um exemplo:

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

Para propriedades TRBL (top, right, bottom e left), sempre utilize essa ordem. Exemplo:

.elemento-lindo {
	margin-top: 10px;
	margin-right: 15px;
	margin-bottom: 20px;
	margin-left: 2px;
}

Valores

Existem milhares de tipos de valores em CSS, portanto, siga as regras abaixo para manter a consistência no seu código:

  • Coloque um espaço antes do valor, depois dos dois pontos;
  • Não preencha parênteses com espaços;
  • Sempre termine com um ponto e vírgula;
  • Use aspas duplas ao invés de aspas simples, e apenas quando necessário, como quando um nome da fonte tem um espaço;
  • Valores zerados (0) não devem estar presentes e também não devem ter unidades, a menos que necessário, como no caso de transição de duração;
  • Altura de linha não deve ter unidade, a não ser que seja necessário definir um valor de pixel específico. Isso é mais do que apenas uma convenção estilo, mas vale a pena mencionar aqui. Mais informações em  http://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/;
  • Use um zero à esquerda para valores decimais, inclusive para rgba();
  • Vários valores separados por vírgulas para uma propriedade devem ser separados por um espaço ou uma nova linha, inclusive dentro de rgba(). Utilize novas linhas para valores muito longos.

Exemplo correto:

.class { 
    background-image: url(images/bg.png);
    font-family: "Helvetica Neue", sans-serif;
}
 
.class { 
    font-family: Georgia, serif;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5),
                 0 1px 0 #fff;
}

Exemplo incorreto:

.class { /* Não esqueça do espaço */
    background:#fff
}
 
.class { /* Evite unidades em valores zerados */
    margin: 0px 0px 20px 0px;
}

Media queries

Media queries são excelentes para que configuremos vários estilos para um mesmo site em tamanhos de telas diferentes, porém, tente seguir as regras abaixo para manter consistência:

  • Agrupe todas as media queries no final do seu CSS;
  • Faça a indentação correta dentro das media queries.

Por exemplo:

@media all and (max-width: 699px) and (min-width: 520px) {
	body {
		background: #fff;
		font-size: 14px;
	}
}

Comentários

  • Comente, e comente sempre que achar necessário. Os comentários são excelentes para indicar o que você queria fazer com tal propriedade ou regra. Principalmente quando for para corrigir bugs para diferentes navegadores.
  • Para comentários muito longos, você deve manter no máximo 80 caracteres por linha;
  • Tente criar um índice de conteúdo (com números) para as sessões do seu CSS (1.0 ,1.1, 2.0…). Agrupe as regras para cada sessão;
  • Se quiser seguir um padrão, utilize o http://cssdoc.net (mas lembre-se que isso não é um requisito).

Exemplo de sessão:

/**
* #.# Título da sessão
*
* Descrição da sessão.
*/
 
.selector {
    float: left;
}

Exemplo de comentários em linha:

/* Este é um comentário sobre o seletor */
 
.another-selector {
    position: absolute;
    top: 0 !important; /* Eu devo explicar o motivo disso ser tão !important */
}

Fonte: CSS Coding Standards

Javascript no WordPress

Os princípios para JavaScript são basicamente os mesmos que você vai utilizar em PHP (veja no início do artigo), porém, como cada linguagem tem suas próprias necessidades, existem algumas diferenças.

Para encontrar maiores detalhes sobre os padrões de codificação JavaScript no WordPress, leia o artigo abaixo:

É bastante interessante que você mantenha consistência em todos os seus scripts e arquivos em HTML e CSS, tente seguir os mesmos princípios básicos descritos em todas as sessões desse artigo.

Comente, documente as partes do seu código, e, acima de tudo, tente escrever um código bonito e legível.

Concluindo

Bom código, é código legível.

Lembre-se que, quanto mais pessoas contribuírem com um código, mais desorganizado ele tende a ficar, porém, se você (e todo mundo) seguir as mesmas regras, tal código vai ficar organizado, como se uma só pessoa o tivesse escrito.

No mais, código bem documentado e bonito é mais fácil para ser mantido, mesmo que você trabalhe sozinho.

Em caso de dúvidas, não hesite em perguntar, afinal, a comunidade do WordPress é gigante, e sempre existe alguém disposto a ajudar.

Criar um layout responsivo não é tão complicado quando você tem em mente o que deseja. Por exemplo, no vídeo que você vai assistir nesse artigo, queria criar um layout com menu superior, conteúdo na esquerda, barra lateral na direita e um rodapé simples. Também gostaria que o conteúdo tivesse largura máxima de 1200px e que a barra lateral seguisse o fluxo do layout quando o usuário visualizasse o site utilizando um smartphone.

Então decidi tentar montar o layout correndo aqui, sem testar em nenhum navegador mais antigo nem me preocupar com cores, fundos, nem nada disso, somente a estrutura. Fiz isso para que você possa entender o processo da criação e o estilo que costumo começar um desenvolvimento. Normalmente eu crio a estrutura primeiro e depois trabalho o restante do layout.

Como resultado? Como você vai ver, ficou horrível, porém atingimos o objetivo de criar a estrutura de um layout responsivo. Agora só precisamos ajustar as cores (é óbvio), fontes e coisas do tipo. Não esquecendo de testar em outros navegadores para corrigir os bugs, por exemplo, o menu precisa de um "fix" para o IE6 e IE7 no menu. Também aconselharia verificar a largura mínima para o IE8, já que media queries não funcionam nele (ou utilizar algo que faça funcionar, como respond.js).

Assista ao vídeo abaixo.

Layout responsivo em 8 minutos

Obs.: Não é um problema no áudio, eu gravei sem microfone propositalmente para não demorar muito e focar completamente no código.

Só isso!

O código do vídeo

Se quiser copiar o código do vídeo, segue abaixo:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		
		<title>TutsUP - Layout Responsivo</title>
		
		<style>
		body, html{
			margin:0;
			padding:0;
		}
		.main{
			max-width:1200px;
			margin:0 auto;
			overflow:hidden;
			background:lightgray;
		}
		.content{
			float:left;
			width:100%;
			margin-right:-210px;
		}
		.content-inner{
			margin-right:210px;
		}
		.sidebar{
			background:red;
			float:right;
			width:200px;
		}
		.menu{
			width:100%;
			background:blue;
		}
		.menu ul{
			margin:0; 
			padding:0;
		}
		.menu ul li{
			display:inline-block;
			*display:inline;
			zoom:1;
			margin:0; 
			padding:0;
		}
		.menu ul li a{
			display:block;
			padding:20px;
			color:#fff;
		}
		.footer{
			width:100%;
			background:yellow;
			text-align:center;
		}
		
		@media screen and (max-width: 700px) {
			.sidebar, .content-inner, .content{
				float: none;
				width: 100%;
				margin-right:0;
			}
		}
		</style>
		</head>
	<body>
		<div class="main">
			<div class="menu">
				<ul>
					<li> <a href="#"> menu </a> </li>
					<li> <a href="#"> menu </a> </li>
				</ul>
			</div>
			<div class="content">
				<div class="content-inner">
					Conteúdo
				</div>
				
			</div>
			<div class="sidebar">
				Barra lateral
			</div>
			
			<br style="clear:both">
			
			<div class="footer">
				Rodapé
			</div>
		</div>
	</body>
</html>

Provavelmente isso vai funcionar perfeitamente em todos os navegadores. Apenas media queries (como eu disse), precisam ser analisadas no IE6, 7 e 8.