Posts na categoria ‘HTML’
2fev2012
Boas!!
apenas para deixar registrado mesmo..
Album de fotos, baseado em um escode/mostra, com a propriedade display.
Fiz em javascript puro, em poucos minutos. Foi mais dificil achar as imagens, e mais trabalhoso redimensionar elas, do que fazer o código js.. hehe
Enfim, online:
script usado:
<script type="text/javascript">
function id( el ){
return document.getElementById( el );
}
function hide_all(){
var els = id('content').getElementsByTagName('ul');
for( var i=0; i<els.length; i++ )
{
els[i].style.display = 'none';
}
}
/* http://www.javascriptkit.com/jsref/event.shtml */
function disablelink( e ){
var evt = window.event || e
if (evt.preventDefault) //supports preventDefault?
evt.preventDefault()
else //IE browser
return false
}
function palco( src ){
id('palco').innerHTML = '<img src="'+src+'" alt="" />';
}
window.onload = function(){
hide_all();
var as = id('lista').getElementsByTagName('a');
for( var i=0; i<as.length; i++ )
{
as[i].onclick = function( e ){
hide_all();
var id_el = this.href.split('#')
id( id_el[1] ).style.display = 'block';
return disablelink( e );
}
}
var as = id('content').getElementsByTagName('a');
for( var i=0; i<as.length; i++ )
{
as[i].onclick = function( e ){
palco( this.href )
return disablelink( e );
}
}
}
</script>
Link deste post
Tags: album
25jan2012
Repositório, para deixar arquivado aqui.
Veja que ao clicar em cada botão, o tamanho do vídeo se altera.
<html>
<head>
<style type="text/css">
* { margin: 0; padding: 0; }
html, body { height: 100%; }
</style>
<script type="text/javascript">
function sizeIframe( w, h )
{
document.getElementById('yt').width = w;
document.getElementById('yt').height = h;
}
window.onload = function(){
sizeIframe( document.body.offsetWidth, document.body.offsetHeight-30 );
}
</script>
</head>
<body>
<iframe width="420" height="315" src="http://www.youtube.com/embed/tvaPMNq4Ey0" frameborder="0" allowfullscreen id="yt"></iframe>
<input type="button" name="mudar" value="600x480" onclick="sizeIframe( 600, 480 )" />
<input type="button" name="mudar" value="600x480" onclick="sizeIframe( 420, 315 )" />
<input type="button" name="mudar" value="300x240" onclick="sizeIframe( 300, 240 )" />
</body>
</html>
É isso. Me diga se vc usar.
Link deste post
Tags: embed
25jan2012
Boas,
A idéia aqui, foi chegar próximo do efeito de “Exibir mais” do youtube:
Escondido:
A mostra:
Ok ?
Uma parte do conteúdo fica a mostra, e clicando no botão aparece o restante.
O primeiro passo é resolver o efeito no css. Todos os efeitos são apenas css. O javascript manipulando css. jQuery só entra para facilitar essa manipulação, porém é importante ressaltar, que toda a lógica e o efeito em si, ficou no css.
Depois de conseguir resolver tanto o estado aberto, qnto o fechado, usando apenas css e html, sem nenhuma linha de js, fazer o comportamento fica super simples.
<html>
<head>
<style type="text/css">
* { margin: 0; padding: 0; }
p { margin-bottom: 10px; }
.content { margin: 0 auto; width: 500px; }
#panel { position: relative; width: 500px; margin: 0 auto; }
#content { }
.hidden { height: 100px; overflow: hidden; }
#toggle { width: 488px; height: 20px; padding: 5px;
background: #fff; border: 1px solid #ccc; cursor: pointer;
text-align: center;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#toggle').click(function(){
jQuery('#panel').toggleClass('hidden');
});
});
</script>
</head>
<body>
<div id="panel" class="hidden content">
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed gravida dolor. Fusce aliquam, urna sit amet
luctus adipiscing, massa sem venenatis dui, quis accumsan mi orci eu orci. Mauris nec massa non mi iaculis tincidunt
eget a lectus. Curabitur suscipit, magna vel laoreet volutpat, sem mauris placerat risus, nec pretium mauris orci non dui.</p>
<p>Cras in massa dapibus leo tincidunt molestie nec ut sem. Aenean sit amet ipsum risus. Class aptent taciti sociosqu
ad litora torquent per conubia nostra, per inceptos himenaeos. Cras vitae erat at magna volutpat consequat ut a justo.
Mauris dapibus dolor at orci placerat congue. Praesent facilisis sodales molestie. Quisque eget lacus eget justo aliquet
sagittis. Duis sed elit id dui semper feugiat. Vivamus risus magna, facilisis at hendrerit sit amet, accumsan nec felis.</p>
<p>Nunc massa tellus, fringilla ut tincidunt consequat, ultricies eget nunc. </p>
</div><!-- /content -->
</div><!-- /panel -->
<div id="toggle" class="content">toggle</div>
</body>
</html>
Link deste post
Tags: esconde mostra
22nov2011
Dúvida rápida no fórum..
Será que é possível saber, se um documento foi aberto diretamente ? ou se ele foi aberto ‘como popup’ ?
b.html
<script type="text/javascript">
alert( window.opener );
</script>
Qndo acessarmos diretamente esse arquivo, o alert irá mostrar: null (digitando na url, ou copiando e colando daqui)
http://wbruno.com.br/scripts/b.html
e agora:
a.html
<script type="text/javascript">
window.open( 'b.html', '', 'width=300, height=200;')
</script>
ao acessarmos o arquivo a.html, o alert do nosso b.html, que foi aberto como popup, irá mostrar: [Object Window]
Link deste post
Tags: window.open
26out2011
O nosso conhecido DropDown, porém abrindo com um click na LI, e fechando com um click ‘fora’.
Note que esse clique fora, quer dizer clicar em tudo oque não seja o menu. Logo, o elemento que temos de cara para isso, é o body. Convém lembrar, que os eventos em javascript propagam de filho para pai.
Sendo assim, um click no menu, dispara também um click no body.
Por isso, que uso ali, o método .stopPropagation(), pois qndo eu clicar no #menu li(para abrir o sub especifico), não quero que seja disparado o click do body(que fecha os subs).
Bom, é isso, o código está simples e é auto explicativo.
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
jQuery(document).ready(function( $ ){
var uls = $('#menu ul');
uls.hide();
$('#menu > li').click(function( e ){
e.stopPropagation();
uls.hide();
$( this ).find('ul').show();
});
$('#menu ul').click(function( e ){
e.stopPropagation();
});
$('body').click(function(){
uls.hide();
});
});
</script>
<style type="text/css">
* { list-style: none; }
html, body { height: 100%; }
body { font: 12px/12px Tahoma, sans-serif; color: #666; }
#main { min-height: 100%; }
#menu { height: 30px; }
#menu li {
position: relative;
float: left;
padding: 0 10px;
height: 30px;
line-height: 30px;
border: 1px solid #666;
}
#menu ul {
position: absolute;
top: 30px;
left: -1px;
border: 1px solid #666;
background: #fff;
}
#menu li li {
width: 200px;
border: none;
}
</style>
</head>
<body>
<div id="main">
<ul id="menu">
<li>Abrir sub 1
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</li>
<li>Abrir sub 2
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
</ul><!-- /menu -->
</div><!-- /main -->
</body>
</html>
é isso ai. Comente se te ajudou, ou se tiver alguma dúvida/sugestão.
Link deste post
Tags: dropdown, menu
18out2011
Depois do post motivacional para iniciar o recorte Tableless, vamos agora entender como pensar.
Abstraindo a estrutura
Uma das capacidades mais importantes para um desenvolvedor/programador, é a habilidade de abstrair.
Você deve ser capaz de olhar para uma estrutura complexa, e quebrar esta em diversas partes. Resolva cada uma das partes, cada um dos “probleminhas menores”, e então no final você terá resolvido o todo.
Não desperdice elementos
Nem sempre precisamos de mais marcação html para resolver um efeito de layout.
Um elemento muito bom que temos “de graça” na nossa marcação é o <body>, use!
Ele ocupa por default 100% da largura da viewport do browser. Ele sempre estará lá, e por trás de todo e qualquer elemento novo que adicionemos.
Logo, a escolha óbvia para esse elemento, é que ele receba um background-image|color: do fundo do site. Pode parecer básico para alguns, mas frequentemente navego em sites, em que seus DEVs, criaram um outro elemento apenas para o fundo, em vez de utilizar o body.
A nossa escolha mais óbvia para o bg image do <body> é aquele degradê azul ali no fundo. Sim, começamos montando o palco, e então vamos vindo para frente.
Note que é este filete que coloquei de imagem aqui do lado direito:
Este filete pode ser tão fino quanto quisermos, 1px de largura basta, pois o efeito de degradê está na orientação vertical.
Outras variações, seriam um fundo com linhas diagonais, degradê invertido(mais claro no topo)…
Identificando as partes grandes
Por mais complexo que seja, inicie do simples, de fora para dentro.[ regra da cadeia ]
Olhe para o todo, e veja quais partes são “independentes” e até “imutáveis”. Nessa etapa, você vai dar uma borrada mental no conteudo, e enchergar mais ou menos assim:
Resolvido o fundo, vamos para os proximos blocos
Aqui vejo 2 prioridades:
topo em 100% de largura(um pouco mal feito no site atual), e rodapé 100% largura.
Uma técnica que tenho gostado bastante de utilizar é a seguinte:
<div id="header">
<div class="content">
aqui dentro o conteudo do topo
</div>
</div><!-- /header -->
...
<div id="footer">
<div class="content">
aqui dentro o conteudo do topo
</div>
</div><!-- /footer -->
sendo a class .content, a nossa div responsável por centralizar o conteudo, e as externas #header, e #footer, os elementos que vão ter o nosso background 100% de largura.
.content {
width: 960px;
margin: 0 auto;
}
ok ? repetimos o mesmo processo anterior para definir o filete de bg do rodapé, e temos q usar uma imagem gigantesca em largura para o fundo do topo. Atenção para usá-la, com background-position: center top;
O miolo
aqui, tem aquela sidebar laranja, que pede obviamente um float : left; e o restante na direita.
<div id="content" clas="content">
<div id="sidebar">
conteudo da sidebar laranja
</div><!-- /sidebar -->
<div id="main">
aquelas 3 caixinhas, o produto em destaque(slideshow)..
</div><!-- /main -->
</div><!-- /content -->
Note que idento corretamente meu HTML, e uso um comentário para marcar o final de cada bloco.
Essa é a estrutura simples e básica que precisamos para o “palco” do nosso recorte. Em cima disso, vamos montando cada parte, repetindo os passos que aqui fizemos, e adicionando algumas particularidades.
É muito importante entender bem os conceitos de box model, só usar position qndo realmente necessário, e se vc souber como fazê-lo(assunto extenso, então depois falo sobre isso especificamente), evitar hacks e tb propriedades com valores gigantescos, como: margin-left: 500px;..
Esse tipo de declaração, geralmente deve ter um cheiro ruim para você.. indicando que algo provavelmente está errado.
Bom, é isso.
Link deste post
Tags: recorte, tableless
10out2011
Não basta apenas conhecer todas as tags HTML, decorar todas as propriedades CSS, assim como todos os seus respectivos valores. Tem que saber usar.
Cada tag representa uma informação, cada par: propriedade: valor css modifica nosso elemento e a cascata afetada por ele. Temos que fazer o melhor uso possível dessas ferramentas que temos disponvíveis.
O seu nível de conhecimento
Se você é iniciante e tem diversas dificuldades, usa mais tempo do que gostaria, e pretende se aperfeiçoar, guarde bem as idéias que vou expor. São baseadas na minha “nem tão curta assim” experiência com recortes css.
Se você já está num nível mais alto, continue lendo pois entendendo como um colega de profissão trabalha, seremos capazes de melhorar os nossos próprios métodos e os dele também. Aceito sugestões e dicas no final do artigo (comente a vontade).
Vou mostrar como penso ao iniciar qualquer layout, ou qualquer alteração em uma página. Note que não é apenas “criar as DIVs”(como vi um outro tutorial por ai dizendo). Este não é um guia, e nem a única forma de ser fazer.
É mais como a forma que faço, e acho válido compartilhar com você.
Na verdade, ‘criar as divs’, é o de menos. Precisamos saber porque criar, e onde criar. Não tem fórmula mágica, ou uma estrutura padrão(topo, conteudo e rodapé) que vai atender a todos os wireframes possíveis. Precisamos analisar cada um individualmente, e então decidir qual a melhor estrutura para aquele projeto.
Iniciando
A estrutura padrão, é a marcação mínima necessária para criar um documento válido:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Iniciando um Recorte Tableless</title>
<meta name="author" content="William Bruno" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<link rel="stylesheet" href="css/main.css" type="text/css" />
<script type="text/javascript"></script>
</head>
<body>
</body>
</html>
Algumas metas básicas
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="google-site-verification" content="" />
<meta http-equiv="imagetoolbar" content="no" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="content-language" content="pt-br" />
Estas são as meta tags mais básicas que vamos precisar, assim que tivermos terminado a implementação da estrutura, e formos publicar a página. A meta google-site-verification, pode ser trocada apenas pelo snipet do seu Google Analytics.
Com essa base pronta, podemos começar a analisar o layout.
Analisando o layout
É necessário bater o olho, e ser capaz de analisar as partes grandes do layout.
Enchergar a estrutura. Escolhi meio ao acaso aqui, o layout do site da Gol.
Gaste um tempo aqui nesse passo. Planeje.
Olhe para o \.(psd|png) que o designer te enviou e resolva mentalmente ele. Vá decidindo quais elementos você pretende usar, como posicionar cada coisa.. uma olhada rápida, e apenas mental.
Pense, só isso. Não adianta sair desembestado fazendo, é necessário ter conciência do que será feito.
Incompatibilidade
Se a estrutura for realmente bem feita, e fizer primeiramente sentido para você mesmo, para o motor de renderização que é o seu cérebro, então provavelmente menos problemas de compabilidades você terá.
Os layouts que mais quebram no Internet Explorer, Safari, e aqueles que funcionam somente no Firefox, são aqueles em que apenas “sairam fazendo”. Foram testando coisas sem sentido, e conforme a complexidade aumentava, mais camadas de html, hacks, soluções mirabolosas, foram sendo adicionadas.
Seja bem vindo ao mundo do simples, onde tudo funciona, e vários problemas de incompatibilidade são evitados, simplesmente pq vc sabe oque está fazendo.
No próximo post vou mostrar “como pensar” simples.
Link deste post
Tags: recorte, tableless
6out2011
Post rápido.
Situação:
Temos um projeto desenvolvido em php. Porém queremos que na URL a extensão a ser mostrada para o visitante seja .html.
Uma forma de fazer isto, seria adicionando a extensão .html para ser interpretada pelo servidor como um script dinâmico, e assim todo e qualquer arquivo .html passaria pelo interpretador, a procura de código php.
AddType application/x-httpd-php html
Uma outra forma, consiste em somente reescrever a URL, mascarando a extensão .php, e fazendo o servidor devolver a requisição, para o respectivo arquivo .php.
Dessa forma aqui:
RewriteEngine On
RewriteRule ^([a-z]+)\.html$ $1.php [L]
Note:
Acessando a URL: http://localhost/index.html, o arquivo que a ser chamado será o index.php.
E assim por diante, pois o nosso grupo ali, casa tudo o que for letras de a até z, em qualquer quantidade.
O que as RewriteRules fazem na verdade, é ‘traduzirem’ para o servidor as requisições enviadas.
Na regra acima, pedi o arquivo: index.html e a regra no htacces traduziu para index.php.
Um problema
Se realmente tivermos um arquivo: teste.html, com apenas a regra acima, o servidor vai ignorar a existência desse arquivo, e irá redirecionar a requisição para um teste.php.
Para corrigir isso, precisamos dizer para ele, que se existir o tal arquivo, deixa o mesmo responder oque foi pedido.
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^([a-z]+)\.html$ $1.php [L]
ou seja, só vai aplicar a Regra, a condição for satisfeita:
RewriteCond %{REQUEST_FILENAME} !-f
E ela diz que o nome requisitado não pode ser um arquivo.
Link deste post
4out2011
Impossível deixar de citar o texto do Henrique C. Pereira para o blog Revolução Etc, nesse início de post:
“Escrever algo semanticamente correto, nada mais é do que utilizar-se desses símbolos (leia-se tags) considerando o significado real pelo qual foram criados.”
Não quero falar sobre semântica como um todo, pois já temos diversos ótimos textos espalhados por ai abordando esse tema. Vou focar este artigo somente em uma única tag: a tag <br />.
(se você tiver dúvidas sobre o básico de semântica, sugiro visitar o artigo que linkei ali no primeiro parágrafo).
Ok, então precisamos usar as tags para o real motivo pelo qual foram criadas.
Oras,
-> tags <p> foram criadas para representar parágrafos.
-> tags <h1> foram criadas para representar títulos de primeira importância.
E assim por diante.
Algumas são bem explícitas (todas são, ou deveriam ser para nós), mas e a incompreendida tag <br /> ?
Afinal, o que o break, realmente significa ? O que essa tag deveria representar ?
http://www.w3.org/wiki/HTML/Elements/br
The <br> element represents a line break.
Então, quando pensarmos em br, devemos pensar em quebras de linha.
Não use!
Se você está em dúvida, simplesmente não use. Evite. Pelo menos até entender a hora correta de usar.
Então vamos falar sobre quando não usar, e sobre quando usar:
Uso incomum
Sou capaz de apostar que nem 20% dos Desenvolvedores FrontEnd, conhecem o
­<br />
Muito bem apresentado pelo Evandro, aqui.
Então bacana, acabamos de encontrar um uso incomum bem desconhecido para a nossa famigerada tag! Porém, e as diferenças entre Sistema Operacional ? Entre browsers ?
Mais especificamente, entre a renderização das fontes ? aplicação ou não de antialising, smooth…
Não force quebras de linha!
Por causa do motivo que citei acima: as diferenças de renderização.
Forçando quebras de linha com uma tag br, podemos estar condenando o nosso documento, a uma incompatibilidade entre SOs.
O espaçamento das fontes é maior no Windows do que no MAC, por exemplo.
Não simule parágrafos
Não simule parágrafos, forçando pular linhas com br. Realmente faça os teus parágrafos.
Se precisar pular uma linha entre um ponto final e outro, então na verdade você tem um outro parágrafo. Use a tag p.
Semântica para elementos nível de bloco
Se um elemento inline como <img />, <strong>, precisa ser colocado sozinho em uma linha, temos o valor block da propriedade display para tal. Não temos nenhum motivo para usar uma quebra de linha nesses casos.
Tag de estruturação
Como já definido, é uma quebra de linha. Então não devemos usar como separador de 2 elementos distintos:
<h1>Titulo</h1><br /><br />
<p>Texto, texto mais texto.</p>
Bem absurdo, pois se quisermos espaço entre um h1 e um p, devemos fazê-lo com css.
Tag vazia
O break é uma tag vazia, não aceita conteúdo. O ‘conteudo’ dela, é a linha (leia texto), que ela separa.
Uma aplicabilidade muito conhecida e defendida é a transcrição de poemas.
Realmente, temos um mesmo verso, que precisa ser escrito em diversas linhas, mas ainda estamos na mesma idéia, e só queremos representar uma pequena pausa, entre cada métrica.
<p>Ninguém venha me dar vida,<br />
que estou morrendo de amor,<br />
que estou feliz de morrer,<br />
que não tenho mal nem dor,<br />
que estou de sonho ferido,<br />
que não me quero curar,<br />
que estou deixando de ser,<br />
e não quero me encontrar,<br />
que estou dentro de um navio,<br />
que sei que vai naufragar,</p>
<p>já não falo e ainda sorrio,<br />
porque está perto de mim<br />
o dono verde do mar<br />
que busquei desde o começo,<br />
e estava apenas no fim.</p>
<p>Corações, por que chorais?<br />
Preparai meu arremesso<br />
para as algas e os corais.</p>
<p>Fim ditoso, hora feliz:<br />
guardai meu amor sem preço,<br />
que só quis quem não me quis.</p>
Cecília Meireles
Prefira ser semântico, do que preguiçoso
Muito comum no dia-a-dia, e a marcação que boa parte dos coders que já vi trabalhando, usariam é a seguinte:
<p><strong>Um pequeno titulo</strong><br /><br />
E aqui continua o texto</p>
Sinceramente, isso fere meus princípios. Um parágrafo é um parágrafo.
Não faz nenhum sentido um parágrafo que dentro dele mesmo possui um ‘título’. Não estamos falando de headers do documento (tags hx), e nem de uma palavra que mereceu um destaque maior no decorrer de uma idéia.
Mas de um leve título ali, isso deve nos levar a criar um elemento separado:
<strong class="titulo">Um pequeno titulo</strong>
<p>E aqui continua o texto</p>
E então por css, controlo o espaçamento, economizando 2 tags br que não deveriam ter sido utilizadas.
.titulo {
display: block;
margin-bottom: 17px;
}
Bem melhor termos implementado assim. Se o espaçamento entre o título e o texto não casar exatamente com o line-height, definido para o nosso parágrafo, então não conseguiriamos nunca com a marcação anterior resolver o efeito de forma adequada.
O break é uma leve pausa, e não espaçamentos
Tão comum vermos documentos lotados de brs seguidos um dos outros, para espaçar.
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br /><br />
<br /><br />
<br /><br />
Pellentesque nulla tortor, lacinia eget ullamcorper id, aliquam vel metus. <p>
Ughr ! Isso agride. Pense bem, HTML é uma linguagem de marcação, e depois de longos esforços, toda e qualquer estilização foi deixada para o CSS, certo?
Então, porque raios, alguns desenvolvedores insistem em simular espaçamentos(algo que claramente entra no conceito de estilização, e box model), usando essa tag de quebra de linha?.
Não faz nenhum sentido.
Se tenho que aumentar o espaçamento entre uma oração e outra, aumento o margin-bottom do parágrafo de cima, mas nunca usarei tags <br /> para tal.
Títulos ‘quebrados’
Aqui a tag br faz todo sentido:
<h2>Isso é:<br />
Semântica.</h2>
Não estamos no contexto de subtítulo, mas sim do mesmo título, da mesma idéia que mereceu uma quebra ali.
Em conjunto com a tag <address>
Um endereço é renderizado e planejado para passar informações em várias linhas, sendo cada linha uma certa coisa.
<address>Rua dos bobos, 0<br />
01234-567
</address>
Cabe uma análise do seu contexto, lembrando que existem as listas de definição <dd> que também poderiam resolver muito bem a semântica que buscamos aqui.
Entendeu ?
Nesse ponto, se você realmente entendeu e concorda com que propus, e você se sente habilitado para usar corretamente, use. Use sabiamente. Não para tampar buraco, ou por preguiça de fazer de outra forma.
Chegando até este ponto da leitura, você terá bagagem suficiente para usar a tag br da única forma correta que existe: quebrar linhas.
Link deste post
Tags: br, semântica
22set2011
Tarefa chata !
Desenvolver Email Marketing envolve recorrer a uma estruturação em <table>, que a tempos deixamos para trás.
Pois é, não adianta seguir padrões web, fazer Tableless, ou querer usar bastante css. Simplemente não vai funcionar.
Se no desenvolvimento de sites, nossos vilões são os browsers do mercado, e as diferenças de renderização, bugs e versões dos mesmos, num Email Marketing, a dor de cabeça dos Desenvolvedores FrontEnd, são os clients de email.
Outlook 2007, Outlook 2003 (mais uma vez a Micro$oft complicando a nossa vida, com versões diferentes de um mesmo software, e a incompabilidade/incosistência deles), gmail(um dos mais chatos para desenvolver emm), hotmail… e por ai vai.
Felizmente, algumas técnicas são conhecidas, mais ou menos como um ‘caminho das pedras’. Seguindo dicas simples, é possível gastarmos menos tempo nisso, e entregar um código HTML bastante satisfatório no quesito cross-client.
Sobre a compatibilidade, veja: Guide to CSS support in email.
Vamos lá, algumas regras:
Durante o design da peça:
Não use background-image
Como vc pode ver na tabela do link acima, background-image, não funciona nos clients de emails mais usados atualmente: hotmail, outlook, gmail.. portanto, não use. Peça para o designer fazer o layout, pensando que onde tiver texto, o fundo precisa ser cor sólida.
background-color funciona bem, e vamos usar a moda antiga:
<td bgcolor="#000">
No início do recorte:
Use a ferramenta slice do Photoshop. Pense em recortes horizontais.
O atributo rowspan é problemático
Por isso que eu disse para pensar em linhas. Não faça rowspans. Nem perca tempo. Irá quebrar.
Use e abuse dos colspans, mas o row nunca!
Nem pense em margin e padding
style="margin: yypx; padding: yypx;"
Vai funcionar nos teus navegadores enqnto vc estiver testando, porém nos clients de email não.
A regra agora, é fazer todo o espaçamento e divisão entre blocos, com fatias de imagem.
Para isso, o ‘Save for web’ do Photoshop, marcando a opção: ‘HTML and images’, é o que temos para agilizar o processo.
Lembre-se de fazer os teus slices o mais folgados possível. Deixando espaço para a direita e para baixo, prevendo uma futura diferença de fontes entre sistemas operacionais.
Começando a mexer no html:
Declare width e height em todas as TDs
Depois de exportar com o photoshop, preciso sair colocando altura, lagura e alinhamento vertical em todas as células da tabela.
Declare align=”top”
Em todas as imagens. Isso vai evitar um espaçamento entre uma linha e outra em clients como o gmail.
Em alguns textos, é interessante usarmos align=”bottom” e middle em nossas TDs. Tudo bem, podemos usar. Mas mantenha as TDs de imagens com o valor top.
Declare display: block em imagens de uma linha
Aquelas imagens que pegam a largura toda da tabela. Aquela nossa TR que só tem uma TD dentro dela, com uma única imagem.
CSS inline novamente. Declare display: block; nessas imagens.
Colocando texto, onde deve ser texto:
Abuse da tag font
Eu nem lembrava mais dessa tag.. mas para recorte de EMM, é melhor garantir que vai funcionar na maioria dos clients, e o mais perfeito possível.
<font></font>
Não vamos cair na tentação de usar um <p>, <span>.. ou tags do tipo. Dificil prevermos quais serão as definições padrão do box model dessas tags. A tag <font> funciona bem. Façamos todos os nossos textos com ela.
CSS inline
Isso! Não temos ‘reaproveitamento’ de código fazendo email marketing. Note que a tag link e style, não funcionam no hotmail e gmail respectivamente. Portanto,
style=""
neles !
A família de propriedades css font funciona bem
Em testes que fiz, tentando usar o size da tag <font>, nunca ficava bom. Vale lembrar que o sistema operacional entra como variavel nesse desenvolvimento também. Uma font 12px Tahoma, no MAC fica de uma forma e no Windows, de uma outra completamente diferente(espaçamento de letras, anti-alising..).
Então, aqui usamos css inline.
Links! Links!
Afinal de pouco adiantaria nossos emails marketings, se estes não tiverem links.
Para links em textos, devemos usar livremente a tag de âncora <a>, porém naqueles botõezinhos e banners que o designer fez, não vale a mesma regra. Melhor aqui é usar imagem mapeada!
Isso mesmo. Use #map. Se você tentar usar algo como:
<a href=""><img src="..." /></a>
Você terá problemas com isso.
Será que isso é tudo?
Talvez não, mas posso garatir que ao menos é o suficiente para os clients de email mais conhecidos e utilizados.
Se ainda assim, você estiver com dúvidas, e precisar de mais dicas, este texto: http://www.campaignmonitor.com/design-guidelines/(inglês), é a minha última dica.
É trabalhoso
Realmente é. E o ínicio do recorte, em que temos que colocar largura, altura, valign em todas as TDs, align=”top”, em todas as imagens, display: block; em todas as imagens que estão sozinhas em uma só linha, e colocar o caminho completo em todos os atributos src=”" das nossas imagens, é um tanto quanto repetitivo, e braçal.
Por isso, desenvolvi essa ferramenta para recorte de Email Marketing. Lógico que não faz milagre, mas com umas Expressões Regulares e php, faço essa parte braçal, de entrar com o HTML:
<tr>
<td><img src="images/img1.jpg" width="40" height="20" alt=""></td>
<td><img src="images/img2.jpg" width="56" height="13" alt=""></td>
</tr>
E sair:
<tr>
<td width="40" height="20" valign="top"><img src="http://wbruno.com.br/images/img1.jpg" width="40" height="20" alt="" align="top"></td>
<td width="56" height="13" valign="top"><img src="http://wbruno.com.br/images/img2.jpg" width="56" height="13" alt="" align="top"></td>
</tr>
Ou seja, a parte chata resolvida.
Dai resta apenas trocar os slices onde deve ter texto, por texto mesmo formatado segundo as dicas acima.
É isso. Espero que ajude vocês.
Link deste post
Tags: recorte
