Blog Web Standards

Soluções para os problemas enfrentados pelos desenvolvedores HTML e CSS no dia-a-dia

22 2012 março

Padrão de formulários

Autor: g3 em HTML

Sempre utilizamos um estilo base para formulários quando trabalhamos com páginas de cadastro, login, etc. Consequentemente possuímos uma forma bem similar para escrever nossos códigos para formulários. Por isso com o passar do tempo fomos testando e incrementando nosso padrão para formulário. Tanto a parte de código HTML quando CSS.

Atualizamos o post do Documento base para CSS. Agora no arquivo “geral.css” contém os estilos necessários para estilizar um formulário default.

Abaixo está nosso HTML pré-definido para formulário:

<!-- abre form -->
<form action="#" method="post">
  <fieldset>

    <!-- abre #instrucoes_formulario -->
    <aside id="instrucoes_formulario">
      <p class="erro">Verifique os campos com asterisco e destaque vermelho.</p>
      <!-- <p>Preencha os campos obrigatórios (*).</p> -->
    </aside>
    <!-- fecha #instrucoes_formulario -->

    <ol>
      <li class="erro">
        <label for="nome">* Nome</label> <input type="text" name="nome" id="nome" /> <em>Apenas letras</em>
      </li>
      <li class="erro">
        <label for="senha">* Senha</label>
        <input type="password" name="senha" id="senha" />
        <em>Ex.: Asd@123</em>
      </li>
      <li>
        <label for="email">* E-mail</label>
        <input type="email" name="email" id="email" />
        <em>exemplo@exemplo.com</em>
      </li>
      <li class="erro">
        <label for="telefone">Telefone</label>
        <input type="tel" name="telefone" id="telefone" />
        <em>(xx) xxxx-xxxx</em>
      </li>
      <!-- input[type=date] é suportado apenas no Opera -->
      <!--
      <li>
        <label for="data">Data</label>
        <input type="date" name="data" id="data" />
        <em>yyyy-mm-dd</em>
      </li>
      -->
      <li>
        <label for="site">Site</label>
        <input type="url" name="site" id="site" value="http://www.exemplo.com/" />
        <em>http://www.exemplo.com/</em>
      </li>
      <li>
        <label>Números</label>
        <input type="number" name="campo_numero" id="campo_numero" />
        <em>Use apenas números</em>
      </li>
      <li>
        <!-- <p> parágrafo com title servindo como label dos campos da listagem a seguir -->
        <p title="Escolha alguma das opções XXXX">Opções</p>
        <!-- <ul> listagem de campos à parte do fluxo de preenchimento -->
        <ul>
          <li>
            <label title="Selecionar opção a"><input type="radio" name="#" /> Opção a</label>
          </li>
          <li>
            <label title="Selecionar opção b"><input type="radio" name="#" /> Opção b</label>
          </li>
          <li>
            <label title="Selecionar opção c"><input type="radio" name="#" /> Opção c</label>
          </li>
        </ul>
        <em>Mensagem de teste</em>
      </li>
      <li>
        <!-- <ol> listagem de campos que fazem parte do fluxo de preenchimento -->
        <ol>
          <li class="erro">
            <label for="campo_selecao">Campo seleção</label>
            <select name="campo_selecao" id="campo_selecao">
              <option>Selecione</option>
            </select>
            <p class="erro">Selecione algum xxxxx</p>
          </li>
          <li class="erro">
            <label for="campo_exemplo1">Campo exemplo 1</label>
            <input type="text" name="campo_exemplo1" id="campo_exemplo1" />
            <p class="erro">Mensagem de erro</p>
          </li>
        </ol>
        <em>Ex. vários campos na mesma linha.</em>
      </li>
      <li>
        <label for="mensagem">Mensagem</label>
        <textarea rows="3" cols="30" name="mensagem" id="mensagem"></textarea>
        <em>Mensagem de ajuda</em>
      </li>
      <li class="confirmacao">
        <label for="confirmar" title="Confirmar XXXXX"><input type="checkbox" name="confirmar" id="confirmar" /> Exemplo de campo de confirmação.</label>
      </li>
    </ol>
    <button type="submit">Botão de enviar</button>
  </fieldset>
</form>
<!-- fecha form -->

Este é um padrão que prevê várias possibilidades para formulários, portanto remova e inclua conforme sua necessidade os códigos HTML e CSS. Sempre fazemos esse procedimento no início de cada projeto.

Veja o exemplo do HTML para formulários implementado em nosso framework.

15 2009 outubro

Ordem dos atributos HTML

Autor: g3 em HTML

Última modificação: 16 outubro 2009

Incrementamos o conteúdo do Checklist para HTML.

Assim como temos definido a ordem das propriedades CSS, também documentamos uma ordem para os atributos de HTML.

Agora o Checklist para HTML possui a seção sobre Ordem dos atributos HTML.

23 2009 janeiro

Documento base para CSS

Autor: g3 em CSS

Última modificação: 13 junho 2012

LESS

Para desenvolvimento CSS, utilizamos a linguagem dinâmica de estilos LESS, a qual nos permite estender o CSS com comportamento dinâmico através de variáveis, mixins, operações e funções.

Para usar LESS é necessário usar um JavaScript que permite ao browser interpretar diretamente a linguagem, ou algum compilador que converta seu código do formato LESS para CSS.

Existem vários compiladores para diferentes sistemas operacionais; no nosso caso utilizamos um compilador que, ao detectar a atualização do arquivo LESS, gera automaticamente o CSS minificado (sem espaços, comentários e quebras de linha), o qual puxamos diretamente em nossos HTMLs.

Organização dos arquivos CSS

Nosso padrão de organização para estilização é separado entre os seguintes arquivos:

Estilos gerais

  1. geral-min.less – Estilos para todos os dispositivos;
  2. desktop-min.less – Dispositivos com largura a partir de 769px;
  3. tablet-min.less – Dispositivos com largura de 480px até 768px;
  4. mobile-min.less – Dispositivos com largura de 320px até 479px;
  5. impressao-min.less – Estilos para versão de impressão.

Estilos específicos

Para grandes projetos deve-se manter os arquivos:

  1. desktop-templates-min.less – Estilos específicados por página (id) para versão desktop;
  2. tablet-templates-min.less – Estilos específicados por página (id) para versão tablet;
  3. mobile-templates-min.less – Estilos específicados por página (id) para versão mobile.

Conforme à dimensão do projeto é recomendavél adicionar o arquivo:

Além de todos arquivos utilizamos um arquivo como biblioteca de classes com estilos gerais. Nesse arquivo ficam as váriaveis e mixins globais do LESS, que podem ser utilizadas em qualquer definição de estilo.

  • elementos.less – Classes com estilos gerais, utilizados em todo os arquivos LESS.

Os arquivos com estilos gerais incluem os arquivos de estilos específicos via @import, portanto nos arquivos HTML são adicionados apenas os arquivos gerais.

Media Query

Incluímos no HTML nesse formato:

  <link href="css/geral-min.css?v=1" rel="stylesheet" />
  <link href="css/mobile-min.css?v=1" rel="stylesheet" media="only screen and (min-width: 320px) and (max-width: 479px)" />
  <link href="css/tablet-min.css?v=1" rel="stylesheet" media="only screen and (min-width: 480px) and (max-width: 768px)" />
  <link href="css/desktop-min.css?v=1" rel="stylesheet" media="only screen and (min-width: 769px)" />
  <link href="css/impressao-min.css?v=1" rel="stylesheet" media="print" />
  <!--[if lt IE 9]>
    <link href="css/desktop-min.css?v=1" rel="stylesheet" />
    <script src="js/selectivizr-min.js"></script>
  <![endif]-->

*Selectivizr é um script que interpreta pseudo-classes e seletor por atributo no Internet Explorer 6-8.

Caso o projeto seja pequeno, não usamos nenhum arquivo específico para páginas, incluímos todos estilos nos arquivos: “geral.less”, “mobile.less”, “tablet.less” e “desktop.less”.

No documento de estilos gerais incluímos nosso padrão de estilização para formulários. Que incluí estilos prontos para determinados códigos HTML pré-definidos.

elementos.less

/*
  --------------
  BIBLIOTECA DE CLASSES
  --------------
*/


/*
  --------------
  PALETA DE CORES
  --------------
*/


@cor_textos: #000; // Textos de conteúdo.
@cor_body: #fff; // Cor do fundo do site.


/*
  --------------
  CLASSES
  --------------
*/


/* alinhamentos */
.direita { float: right; }
.esquerda { float: left; }
p {
  &amp;.direita,
  &amp;.esquerda { float: none; }
  &amp;.direita { text-align: right; }
  &amp;.esquerda { text-align: left; }
}
.centro { text-align: center; }

/* image replacement */
.rpl { font: 0/0 a; color: transparent; }

geral-min.less

/*
  Cliente: 
  Projeto: 

  --------------
  PADRÕES DE CODIGO - Frameworks FED v3.0
  --------------

  Nossos projetos são desenvolvidos de acordo com um padrão de escrita.
  Mais informações sobre ele em: http://www.webstandards.blog.br/checklist-para-desenvolvimento-css/
  Qualquer dúvida, mande um e-mail para: contato[at]webstandards.blog.br
*/


@import url("elementos.less"); // biblioteca de classes com estilos gerais


/*
  --------------
  ELEMENTOS e CLASSES
  --------------
*/


/* ------- ELEMENTOS ------- */

  /* reset */
  body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, dl, dd, ol, ul, menu, form, fieldset, legend, button, figure, section, summary { margin: 0; padding: 0; }
  article, aside, details, summary, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
  button, fieldset, iframe, img { border: 0; }
  input[type=search] { -webkit-appearance: textfield; -webkit-box-sizing: content-box; }
  details summary::-webkit-details-marker { display: none; }
  
  html { font: 100% Arial, Helvetica, sans-serif; color: @cor_textos; }
  body { background-color: @cor_body; font-size: .75em; } /* tamanho da fonte: 12px */


  /* formulário */
  form {
    @largura_label: 100px;
    @padding_right_label: 10px;

    #instrucoes-formulario { padding: 1.66em 0;
      p { margin-bottom: .83em;
        &amp;:last-child { margin-bottom: 0; }
      }
    }

    ol, ul { list-style: none; }

    ol {
      li { margin-bottom: .41em; padding: .41em 0; }

      /* label */
      label,
      p,
      ol li:first-child label { float: left; width: @largura_label; padding-right: @padding_right_label; line-height: 2em; text-align: right; }

      /* label interno */
      li li label,
      p.erro,
      li.confirmacao label { float: none; width: auto; padding-right: 0; text-align: left; }
      ul li label { margin-right: 0; }

      /* listas internas */
      ol,
      ul,
      li li { display: inline-block; vertical-align: top; }
      li li { margin: 0 10px 0 0; padding: 0; }
    }

    /* mensagem de erro */
    ol p.erro { display: block; }
    p.erro,
    ol li.erro { color: #e33; }
    li.erro { border-radius: 3px; }
    li.erro,
    input.erro,
    textarea.erro { background-color: #f7cac9; }
    ol li li p.erro { margin-left: 0; }

    /* margin left de alinhamento com os campos */
    #instrucoes_formulario,
    ol li p.erro,
    ol ol li:first-child p.erro,
    ol li.confirmacao label,
    button { margin-left: @largura_label + @padding_right_label; }
  }

  // correções ie

  /* linhas */
  .ie6 form ol li { height: 1%; overflow: hidden; }

  /* listas internas */
  .ie6, .ie7 {
    form {
      ol {
        ol,
        ul,
        li li { display: inline; }
      }
    }
  }

  /* mensagem de erro */
  .ie6 form ol p.erro { display: inline; float: left; }


/* ------- CLASSES ------- */

  /* paginação */
  .paginacao {
    li { display: inline-block;
      a[rel="prev"], a[rel="next"] {
        &amp;:hover {
        }
      }
    }
  }

  /* popup */
  .popup {
    display: none; position: absolute; z-index: 10;
    a.fechar { }
  }
  .pelicula { position: absolute; z-index: 9; }

  /* botões */
  .botao,
  .botao strong { display: inline-block; background: url(../images/botao.png) no-repeat; line-height: 25px; text-decoration: none; }
  .botao { padding-left: 10px;
    strong { padding-right: 10px; background-position: right 0; font-weight: normal; }
    &amp;:hover {
      background-position: 0 0;
      strong { background-position: right 0; }
    }
  }
  button.botao::-moz-focus-inner { border: 0; padding: 0; }


/*
  --------------
  ESTRUTURA
  --------------
*/


/* ------- TOPO ------- */
.topo { }


/* ------- CONTEÚDO ------- */
.conteudo {

  /* coluna1 */
  .coluna1 { }

  /* coluna2 */
  .coluna2 { }

}


/* ------- RODAPÉ ------- */
.rodape { }

desktop-min.less

/*
  --------------
  DESKTOP - Dispositivos com largura a partir de 769px
  --------------
*/

@import url("elementos.less"); // biblioteca de classes com estilos gerais
@import url("desktop-templates-min.css"); /* estilos específicos dos templates */


/*
  --------------
  ELEMENTOS e CLASSES
  --------------
*/


/* ------- CLASSES ------- */
.limites { width: 980px; margin: 0 auto; }

  /* chrome frame */
  .chrome_frame { position: relative; display: none; height: 116px; padding-top: 25px; background: url(../imagens/chrome-frame-bg.jpg) center 0 repeat-x; font: 12px Arial sans-serif !important; color: #545454 !important;
    .limites { position: relative; width: 845px; margin: 0 auto; padding: 0 20px 0 135px; background: url(../imagens/chrome-frame-logo.png) 20px 0 no-repeat; }
    h3 { margin-bottom: 1em; font-size: 1.33em !important; }
    p { margin: 0 240px 12px 0; }
    a { text-decoration: none; color: #0000ff; }
    .instalar { position: absolute; top: -5px; right: 20px; width: 190px; height: 70px; padding: 15px 10px; border: 1px solid #dadada; background: #fff; font-size: .9em !important;
      p { margin: 0; text-align: center; }
      a.botao_instalar { display: block; width: 118px; height: 30px; margin: 0 auto 15px; background: url(../imagens/chrome-frame-botao.png) no-repeat; line-height: 30px; font-weight: bold; font-size: 1.3em; text-align: center; text-decoration: none; color: #fff; }
    }
    a.fechar { position: absolute; top: -15px; right: -15px; width: 14px; height: 14px; background: url(../imagens/chrome-frame-fechar.png) no-repeat; text-indent: -9999em; overflow: hidden; }
  }


/*
  --------------
  ESTRUTURA
  --------------
*/


/* ------- TOPO ------- */
.topo { }


/* ------- CONTEÚDO ------- */
.conteudo {

  /* coluna1 */
  .coluna1 { }

  /* coluna2 */
  .coluna2 { }

}


/* ------- RODAPÉ ------- */
.rodape { }

tablet.css

/*
  --------------
  TABLET - Dispositivos com largura de 480px ate 768px
  --------------
*/


@import url("elementos.less"); // biblioteca de classes com estilos gerais
@import url("tablet-templates-min.css"); /* estilos específicos dos templates */


/*
  --------------
  ELEMENTOS e CLASSES
  --------------
*/


/* ------- ELEMENTOS ------- */



/* ------- CLASSES ------- */



/*
  --------------
  ESTRUTURA
  --------------
*/


/* ------- TOPO ------- */
.topo { }


/* ------- CONTEÚDO ------- */
.conteudo {

  /* coluna1 */
  .coluna1 { }

  /* coluna2 */
  .coluna2 { }

}


/* ------- RODAPÉ ------- */
.rodape { }

mobile-min.less

/*
  --------------
  MOBILE - Dispositivos com largura de 320px ate 479px
  --------------
*/


@import url("elementos.less"); // biblioteca de classes com estilos gerais
@import url("mobile-templates-min.css"); /* estilos específicos dos templates */


/*
  --------------
  ELEMENTOS e CLASSES
  --------------
*/


/* ------- ELEMENTOS ------- */

  /* formulário */

  form {
    ol {
      /* label */
      label,
      p,
      ol li:first-child label { display: block; float: none; width: auto; padding-right: 0; text-align: left; }

      li p.erro,
      ol li:first-child p.erro,
      li.confirmacao label { margin-left: 0; }
    }

    #instrucoes_formulario,
    button { margin-left: 0; }
  }


/* ------- CLASSES ------- */
.limites { padding: 10px; }


/*
  --------------
  ESTRUTURA
  --------------
*/


/* ------- TOPO ------- */
.topo { }


/* ------- CONTEÚDO ------- */
.conteudo {

  /* coluna1 */
  .coluna1 { }

  /* coluna2 */
  .coluna2 { }

}


/* ------- RODAPÉ ------- */
.rodape { }

“desktop-templates-min.less”, “tablet-templates-min.less”, “mobile-templates-min.less” e “templates-min.less”

/*
  --------------
  PÁGINAS ESPECÍFICAS
  --------------
*/


@import url("elementos.less"); // biblioteca de classes com estilos gerais


/* ------- PÁGINA INICIAL ------- */
#inicial { }

impressao-min.less

/*
  --------------
  VERSÃO PARA IMPRESSÃO
  --------------
*/


@import url("elementos.less"); // biblioteca de classes com estilos gerais


/*
  --------------
  ELEMENTOS, ESTRUTURA e CLASSES
  --------------
*/


/* ------- ELEMENTOS ------- */
* { background: transparent !important; text-shadow: none !important; color: black !important; }
body { font-size: 11pt; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
@page { margin: 0.5cm; }
p, h2, h3 { orphans: 3; widows: 3; }
h2, h3 { page-break-after: avoid; }
form { display: none; }
iframe, img { border: 0; }
img { max-width: 100% !important; }
table { border: 1px solid #000; border-collapse: collapse; }
a { text-decoration: underline; }
a[href]:after { content: " (" attr(href) ")"; }
abbr[title]:after { content: " (" attr(title) ")"; }


/* ------- ESTRUTURA ------- */
.topo, .coluna1, .rodape { display: none; }


/* ------- CLASSES ------- */
.paginacao, .popup { display: none; }

Faça download do Framework padrão e veja os arquivos, organização das pastas e ajuste conforme sua necessidade.

23 2009 janeiro

Documento base para XHTML

Autor: Carlitos em HTML

Última modificação: 31 maio 2011

Em desuso. Esse código está ultrapassado em nosso padrão, então evitamos usá-lo.

Gostaria de padronizar seus documentos XHTML? Uma boa forma de começar seu código é com o nosso exemplo utilizado pela equipe, ao início de todos os projetos:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" dir="ltr">
<head>
  <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
  <meta http-equiv="Content-Style-Type" content="text/css" />
  <meta name="description" content="" />
  <meta name="author" content="" />
  <title></title>
  <link href="css/estilo_geral.css?v=1" rel="stylesheet" type="text/css" media="screen" />
  <link href="css/estilo_paginas.css?v=1" rel="stylesheet" type="text/css" media="screen" />
  <link href="css/estilo_print.css?v=1" rel="stylesheet" type="text/css" media="print" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
  <script src="scripts/swfobject.js"></script>
  <script src="scripts/funcionalidades.js"></script>
  <!--[if lt IE 9]><script src="scripts/selectivizr-min.js"></script><![endif]-->
  <!--[if lt IE 8]><script src="scripts/ie6update.js"></script><![endif]-->
  <!--[if IE 6]><script src="scripts/DD_belatedPNG_0.0.8a-min.js"></script><![endif]-->
</head>
<body>

<!-- abre limites -->
<div class="limites">

<!-- abre topo -->
  <div id="topo">

  </div>
<!-- fecha topo -->

<!-- abre conteúdo -->
  <div id="conteudo">

  </div>
<!-- fecha conteúdo -->

<!-- abre rodapé -->
  <div id="rodape">

  </div>
<!-- fecha rodapé -->

</div>
<!-- fecha limites -->

</body>
</html>

Scripts usados