Blog Web Standards

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

HTML

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.

Pensando em deixar o desenvolvimento de códigos mais prático, publicamos nosso Repositório de Snippets, lugar onde colocaremos trechos de código modulares que usamos comumente em nossos projetos.

Obviamente deixamos aberto a todos e, por isso, deixamos espaço aberto a sugestões, tanto para melhoria dos códigos, como outros snippets a serem implementados.

Além disso, disponibilizamos o download dos snippets em formato de Clips para o editor Coda (Mac OS), assim os códigos podem ser utilizados de maneira mais prática!

18 2010 novembro

Documento base para HTML

Autor: Carlitos em HTML, Web Standards

Última modificação: 13 junho 2012

Aqueles que acompanham o Blog Web Standards, sabem que já temos o Documento base para XHTML, que serve como o primeiro passo para qualquer projeto, inserindo meta tags e a estrutura necessária para iniciar um XHTML 1.1 Strict.

Agora, com a demanda cada vez maior pelo HTML5, estamos atualizando o Documento base para HTML5:

<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="pt-br"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="pt-br"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="pt-br"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="pt-br"> <!--<![endif]-->
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
  <meta name="description" content="" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title></title>
  <link href="humans.txt" rel="author" />
  <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]-->
  <script src="js/modernizr.custom.83845.js"></script>
</head>
<body id="inicial">

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

<!-- abre .topo -->
  <header class="topo">
    
  </header>
<!-- fecha .topo -->

<!-- abre .conteudo -->
  <div class="conteudo">
    
  </div>
<!-- fecha .conteudo -->

<!-- abre .rodape -->
  <footer class="rodape">
    
  </footer>
<!-- fecha .rodape -->

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

<!-- abre scripts finais, visando a melhor performance do site -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.7.2.min.js">\x3C/script>')</script>
<script src="js/swfobject.js"></script>
<script src="js/funcionalidades.js"></script>
<!--[if lt IE 8]><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script><![endif]-->
<!-- fecha scripts finais -->

</body>
</html>

Scripts usados

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

Última modificação: 12 abril 2011

Listagem horizontal onde os itens de lista vão ficar sempre com tamanho igual (se baseando na altura do maior dos itens): utilizando somente HTML e CSS.

Seria uma listagem no modelo da Americanas.com e Submarino – Porém quando verifiquei o código desses sites vi que não era o ideal, pois utilizam um monte de ULs separadas para cada linha: sendo que deveria ser somente 1.

Pontos positivos – Lista com Display Inline-block

  • Todos itens da linha se adaptam ao tamanho do maior;
  • Sem float: sem preoupações com clear, contemfloat, etc;
  • Possível listar tudo utilizando somente uma UL;

Pontos negativos – Suporte

Veja o exemplo de como vai ficar: Listagem horizontal com itens de mesma altura.

Código HTML

Somente uma listagem UL com items LI contendo uma imagem e um parágrafo.

  <!-- abre listagem -->
    <ul>
      <li>
        <img src="imagens/listagem-item1.jpg" alt="Quadro em aquarela 1" />
        <p>Quadro em Aquarela 60x60px. Pode ser comprado em até <strong>6x no cartão</strong> ou à vista com desconto de <strong>50%</strong> - por Kasper Jeppesen, 2010</p>
      </li>
      <li>
        <img src="imagens/listagem-item2.jpg" alt="Quadro em aquarela 2" />
        <p>Esse item é uma obra de arte fantástica em Aquarela 60x60px - por Kasper Jeppesen, 2010</p>
      </li>
      <li>
        <img src="imagens/listagem-item3.jpg" alt="Quadro em aquarela 3" />
        <p>Obra em Aquarela</p>
      </li>
    </ul>
    <!-- fecha listagem -->

E o CSS:

  #limites ul { list-style: none; letter-spacing: -3px;}
  #limites ul li { display: inline-block; width: 100px; margin: 10px 0; padding: 20px; border-top: 1px #fff solid; text-align: center; vertical-align: top; letter-spacing: normal; zoom: 1; }
  #limites ul li p { text-align: left; }
  • Letter-spacing com valor negativo na UL, pois o display insere automaticamente alguns pixels de margem entre os elementos. Esse valor é zerado novamente no LI (normal).
  • Todos itens se alinham ao topo
  • Paddings com a borda simulam a união dos elementos

Se for testar nos IEs até agora, vai encontrar um BUG como esse:

Quebra de layout nos IEs

Quebra de layout nos IEs

O quadro vermelho indica a quebra, pois esses navegadores não suportam o DISPLAY inline-block corretamente.

Não se preocupe – para concertar isso é só usar um hack para o IE6:

  * html #limites ul li { display: inline; }

E um ajuste para o IE7 – em um CSS separado (se não lembra como fazer, é bom dar uma lida em Conditional comments para Internet Explorer:

  #limites ul li { display: inline; }

Pronto.
Temos uma lista semanticamente correta onde cada linha se adapta ao conteúdo do maior elemento.

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.

Última modificação: 31 março 2010

Sei que email marketing não tem muita ligação com Web Standards, mas todo mundo precisa saber que já existem projetos relacionados e também serve como um guia para produzir esse tipo de material.

Quais são os limites do email marketing utilizando HTML? O que podemos colocar de CSS também, levando em conta algo que funcione nos programas desktops e também nos webservices?

CSS

Pode ser utilizada a tag “style” no head ou no body (só não funciona no AOL MAC, Note 6, Gmail e Hotmail). Mas como no GMail isso não funciona, a dica é usar style inline. Como o Notes 6 tem um suporte mínimo, não levei ele em conta ok? 🙂

Propriedades CSS válidas para todos*:

  • Background-color:
  • Border;
  • Border-collapse;
  • Color;
  • Display, Float e Height(só não funciona no Outlook 07);
  • Font-family (não funciona no Gmail);
  • Font-size;
  • Font-style;
  • Font-weight;
  • Line height;
  • Table-layout;
  • Text-align;
  • Text-decoration;
  • Text-indent;
  • Text-transform;
  • Letter-spacing;
  • Padding;

* Todos testados (Yahoo antigo/novo, Gmail antigo/novo, Live Mail, Hotmail, AOL Web, MobileMe.) / (Outlook (2003 e 07), Windows Mail, Mac Mail, Entourage (2004, 2008), Thunder-bird 2, AOL (9, 10), Mac).

Existem pessoas focadas nos webstandards para os emails: os chamados e-mail standards. Eles mostram screenshots de cada browser como resultados de seus testes, além de dizer o que falta para cada Email Client ficar show para suportar os standars. Ex.: Para o Google Mail ainda é necessário suportar o CSS no header, e não utilizar mais a técnica inline.

Estrutura HTML / CSS

Resumindo: Como construir um e-mail marketing utilizando pelo menos um pouco de webstandards?

  • A estrutura deve ser em tabelas;
  • Utilizar as propriedades que todos os emails clients aceitem (ou pelo menos a maioria deles);
  • CSS inline (apesar de não ser standard, é o que podemos usar);
  • Layout com largura fixa até 580px e a altura pode ser variável (dependendo do layout).
  • Mesmo com todos os cuidados, é possível que o usuário veja a mensagem desconfigurada. Por isso um link do tipo “se você está vendo o email desconfigurado, acesse a outra versão.”

HTML: tags que devemos evitar

Tags HTML que não devem ser utilizadas, por não serem suportadas por muitos clientes de email: (segundo um HTML Email Guide que li).

  • DOCTYPE
  • HTML tag
  • BODY tag
  • Meta tags
  • Head tag
  • Base tag
  • Link tag
  • Script tag
  • Title tag
  • Applet tag
  • Frameset tag
  • Frame tag
  • IFrame tag
  • Comments

Template de E-mail Marketing HTML, utilizando o que falei nesse post. *No topo a mensagem para visualizar o outro formato do email, evitei usar o “clique aqui” por ser termos que são buscados para codificar como Spam.

Template email marketing. Esse template foi testado no GMail, Hotmail, YahooMail e no ThunderBird.

Se você tem dúvidas em quais clientes testar, pode dar preferência aos clientes que mais cresceram em 2009: iPhone, Apple Mail, Hotmail e Gmail – (fonte).


Link relacionado/fonte: Campaing Monitor.

Última modificação: 31 maio 2011

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

Em nosso último artigo comentamos uma forma de inserir vídeos do YouTube em seu site, com código válido, de acordo com as normas da W3C. Porém muita gente entrou em contato conosco falando que era um processo “braçal”, que demandava muito empenho.

Para solucionar este problema, criamos o Gerador de embed YouTube válido W3C que, obviamente, só precisa do URL além das dimensões desejadas para o vídeo; logo abaixo é gerado um código que você só precisa copiar e colar, garantindo que o seu código continue válido, além de funcionar em todos os browsers (inclusive IE6!).

Última modificação: 31 maio 2011

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

Quer saber como inserir vídeos do YouTube em seu site, mantendo seu código validado? Veja abaixo o código para fazer isso de maneira simples:

<!--[if !IE]> -->
              <object type="application/x-shockwave-flash" data="http://www.youtube.com/v/id-do-video" width="425" height="344">
            <!-- <![endif]-->
            <!--[if IE]>
              <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="425" height="344">
              <param name="movie" value="http://www.youtube.com/v/id-do-video" />
              <!--><!--dgx-->
              <param name="loop" value="true" />
              <param name="menu" value="false" />
              <p>Seu navegador não suporta o vídeo.</p>
              </object>
<!-- <![endif]-->

Bom, como pode-se perceber, é só substituir o “id-do-video” pelo próprio id do vídeo, localizado na URL do mesmo. Simples, não é? 🙂

Última modificação: 13 março 2009

Porque utilizar botões expansíveis:

  • Reduz número de arquivos;
  • Reduz arquivos a serem baixados pelo usuário;
  • Carregamento da página mais rápido;
  • Reduz classes no HTML / linhas de CSS;
  • Uma classe = utilizado em todos* os botões (* todos com o mesmo estilo dentro do padrão do site).

Botão expansível CSS

Convencido disto, aprenda como fazer:

  1. Criar a imagem do botão:
  2. Dividir a imagem em 2 partes:
    • O botão será formado por duas peças: o lado esquerdo, e o direito.
    • Divida a imagem deixando o lado esquerdo contendo somente a borda esquerda, veja o exemplo (print do photoshop). Salve como botao_esquerdo.png:

      Botão expansível CSS - Passo 1

      Botão expansível CSS - Passo 1

      Para fazer o lado direito, recorde o restante do botão que não seja a borda esquerda. Abra um novo arquivo com dimensões maiores, por exemplo: Se o botão for WIDTH 100px por HEIGHT 20px, o lado direito terá que ter uma largura de 500px. Essa é a imagem que vai fazer a “expansão”. Siga os passos:

    • Selecione o lado direito
    • Abra um novo arquivo (só para ele) Criando a imagem do lado direito
    • Coloque a borda de um lado da imagem (cole no canto direito)
    • Selecione uma medida 1px(largura) por altura total da imagem. Vamos fazer esse pixel ser igual para todo o resto da imagem
    • Com esse pixel selecionado, (CTRL + T ou EDIT > Free Transform). Agora sim, exenta esse pixel até o outro lado da imagem.
      Photoshop Redimensionamento

      Photoshop Redimensionamento

    • Salve como: botao_direito.png
  3. HTML: Agora temos as duas imagens separadas. Chega de Photoshop, vamos para o o código:

          <a class="botao_expansivel" href="#" title="Botão expansível"><strong>Botão expansível</strong></a>
        

    – Além do link precisamos de um elemento dentro dele para colocar o outro lado da imagem. Pode ser um EM, SPAN ou STRONG. Como nós gostamos dos Webstandards, indicamos o STRONG, pois não ficará sem sentido como um SPAN, por exemplo.

  4. Código CSS*:

          .botao_expansivel { display: inline-block; padding-left: 5px; background: url(../imagens/botao_esquerdo.png) left no-repeat; }
          .botao_expansivel strong { display: inline-block; padding: 5px; background: url(../imagens/botao_direito.png) right no-repeat; }
        

Quem usa os botões expansíveis (HTML + CSS)?

*CSS: Utilizei no CSS do exemplo a Abreviação das propriedades CSS

Última modificação: 26 março 2009

Para usar o atributo target="_blank" para que links abram em uma nova janela sem usar window.open() e ainda ter seu XHTML Strict válido, basta incluir o seguinte trecho de código no cabeçalho da sua página:

window.onload = function() {
  var links = document.links;
  for (var i = 0, s = links.length; i < s; i++) {
    if (links[i].rel == 'external') {
      links[i].target = '_blank';
    }
  }
};

Usando jQuery, o trecho de código que deve ser incluído é bem menor:

$(document).ready(function() {
  $('a[rel=external]').attr('target', '_blank');
});

Após usar este script, basta incluir o atributo rel="external" em seus links para que estes abram em nova janela:

&amp;amp;lt;a href=&amp;amp;quot;http://www.webstandards.blog.br/&amp;amp;quot; title=&amp;amp;quot;Melhor blog sobre Web Standards&amp;amp;quot; rel=&amp;amp;quot;external&amp;amp;quot;&amp;amp;gt;Blog Web Standards&amp;amp;lt;/a&amp;amp;gt;

Obs: este script foi escrito por Gustavo Straube.