Blog Web Standards » HTML

Repositório de Snippets: HTML, CSS, Microformats, jQuery e WordPress

Carlitos — Wed, 19 Jan 2011 17:34:51 +0000

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!

Documento base para HTML5

Carlitos — Thu, 18 Nov 2010 20:02:08 +0000

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 disponibilizando o Documento base para HTML5:

Scripts usados

Google Chrome Frame
Foram apagadas as linhas referente o aviso de instalação do Chrome Frame. Deixamos apenas a meta de renderização.
jQuery
Modernizr
SWFObject
innerShiv
selectivizr

Listagem horizontal com itens de mesma altura

linke — Fri, 13 Aug 2010 18:21:25 +0000

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

Hack para IE6;
Hack/script para IE7;

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.

  
    
      
        
        Quadro em Aquarela 60x60px. Pode ser comprado em até 6x no cartão ou à vista com desconto de 50% - por Kasper Jeppesen, 2010
      
      
        
        Esse item é uma obra de arte fantástica em Aquarela 60x60px - por Kasper Jeppesen, 2010
      
      
        
        Obra em Aquarela

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

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.

Ordem dos atributos HTML

g3 — Thu, 15 Oct 2009 20:43:25 +0000

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.

Email marketing: usando HTML e CSS

linke — Thu, 18 Jun 2009 14:45:18 +0000

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.

. 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.

Gerador de embed YouTube válido W3C

Carlitos — Wed, 08 Apr 2009 14:57:34 +0000

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!).

Como inserir vídeos do YouTube em seu site com XHTML válido

Carlitos — Thu, 02 Apr 2009 13:41:49 +0000

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:

Seu navegador não suporta o vídeo.

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 é?

Botão expansível CSS – links com background

linke — Thu, 12 Mar 2009 19:53:43 +0000

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).

Convencido disto, aprenda como fazer:

Criar a imagem do botão:
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
  
  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)
- 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
- Salve como: botao_direito.png
HTML: Agora temos as duas imagens separadas. Chega de Photoshop, vamos para o o código:
```
      Botão expansível
    
```
- 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.

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)?

Construtora Tecnisa: ex.: botão de busca no topo.
Porto Seguro: os botões verdes no meio do conteúdo.

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

Usando target blank em XHTML Strict

Carlitos — Tue, 03 Feb 2009 13:41:15 +0000

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;lt;a href=&amp;quot;http://www.webstandards.blog.br/&amp;quot; title=&amp;quot;Melhor blog sobre Web Standards&amp;quot; rel=&amp;quot;external&amp;quot;&amp;gt;Blog Web Standards&amp;lt;/a&amp;gt;

Obs: este script foi escrito por Gustavo Straube.

Diferentes tipos de DOCTYPE

Carlitos — Thu, 29 Jan 2009 13:45:03 +0000

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

A renderização correta pelos navegadores depende, inicialmente, do DOCTYPE definido no início dos códigos HTML. Portanto é bem importante conhecermos as variações que podemos usar, de acordo com as necessidades impostas pelo projeto em questão:

Blog Web Standards » HTML

Repositório de Snippets: HTML, CSS, Microformats, jQuery e WordPress

Artigos relacionados:

Documento base para HTML5

Scripts usados

Artigos relacionados:

Listagem horizontal com itens de mesma altura

Pontos positivos – Lista com Display Inline-block

Pontos negativos – Suporte

Código HTML

Artigos relacionados:

Ordem dos atributos HTML

Artigos relacionados:

Email marketing: usando HTML e CSS

CSS

Estrutura HTML / CSS

HTML: tags que devemos evitar

Artigos relacionados:

Gerador de embed YouTube válido W3C

Artigos relacionados:

Como inserir vídeos do YouTube em seu site com XHTML válido

Artigos relacionados:

Botão expansível CSS – links com background

Porque utilizar botões expansíveis:

Artigos relacionados:

Usando target blank em XHTML Strict

Artigos relacionados:

Diferentes tipos de DOCTYPE

HTML 4 STRICT

XHTML 1.0 TRANSITIONAL

XHTML 1.0 STRICT

XHTML 1.1 STRICT

Artigos relacionados: