Para os que ainda tem dúvida sobre espaçamento na hora de trabalhar com tableless, segue aí uma imagem muito explicativa sobre margin, padding e border no seu CSS.

Como vocês podem ver, estou realizando algumas mudanças de visual no blog, então peço desculpas caso não esteja finalizado ainda.

Quem tiver sugestões, pode deixar um comentário aqui neste post.

Até mais

“Image replacement” pode ser traduzido para “Substituição por imagem”. É o termo usado para designar a técnica CSS de escrever um texto usando uma imagem. Isto amplia as possibilidades de uso de fontes decorativas para escrita, uma vez que o designer não fica restrito às fontes instaladas no dispositivo do usuário, podendo compor seus textos com imagens ao seu inteiro gosto. Na prática a substituição se faz para pequenos textos, em sua grande maioria para o nome ou a designação do site. [by Maujor]

Bom, a questão é a seguinte: usar desta técnica para “esconder” o texto e mostrar uma imagem equivalente é considerado como uma ténica black hat de SEO? Ou melhor, pode-se considerar como infringindo as guidelines do Google?

No blog do Matt Cutts, ele mandou um post dizendo:

I don’t recommend that people use CSS to hide text

Isso acabou gerando uma forte discussão entre os webmasters de todo o mundo, pois acharam que todos os que usavam esta técnica iriam ser punidos pelo Google ou outro search engines.

Mas em um comentário, em outro post, ele disse:

If you’re straight-out using CSS to hide text, don’t be surprised if that is called spam. I’m not saying that mouseovers or DHTML text or have-a-logo-but-also-have-text is spam; I answered that last one at a conference when I said “imagine how it would look to a visitor, a competitor, or someone checking out a spam report. If you show your company’s name and it’s Expo Markers instead of an Expo Markers logo, you should be fine. If the text you decide to show is ‘Expo Markers cheap online discount buy online Expo Markers sale …’ then I would be more cautious, because that can look bad.

Ou seja, usem a técnica para escrever o que está exatamente na imagem e não frases e palavras extras(keyword stuffing).

Alguém tem alguma opinião sobre isso?

Hoje eu estava trabalhando em um dos meus projetos, o 3D Jewelry Designer, e coloquei o script Lightbox nas imagens da index e da galeria.

Ficou muito bacana o efeito e a impressão que se tem do site.

Segue em anexo o arquivo ZIP que contém o script.

Download: Lightbox 2.0

Olá galera!

Alguém aí já usou ou usa a tag HR ? Para quem não conhece, a tag HR produz uma linha horizontal que pode fazer a divisão de conteúdos.

Eu particularmente gosto de usar esta tag para colocar “linhas” entre os conteúdos dos meus sites. Muita gente não adere ao HR, preferindo colocar bordas nas DIV’s. Mas é questão de gosto.

Neste post vou ensinar vocês a estilizarem a tag HR através de CSS.

A tag HR é definida do seguinte modo:

Pesquisando na internet, achei todas as propriedades que a tag HR aceita, segue abaixo a lista:

• O Mozilla, IE e Opera aceitam as propriedades “width” e “height” para a tag
• A propriedade “border” pode ser usada no Mozilla e no IE, mas não funciona corretamente no Opera.
• O Mozilla e o Opera usam a propriedade “background-color” para a cor do HR, já o IE utiliza a propriedade “color”
• Todos os três browsers citados acima aceitam a propriedade “background-image” para a tag HR

Exemplos:

1 Linha vermelha:

Código CSS:

hr {
      color: #f00;
      background-color: #f00;
      height: 5px;
    }

Visualização:

Um retângulo de bordas vermelhas e altura de 10px:

Código CSS:

hr {
      border: 1px solid #f00;
      color: #fff;
      background-color: #fff;
      height: 10px;
    }

Visualização:

2 linhas, uma acima da outra. O Opera mostra como um retangulo. Ambas são vermelhas, a primeira é pontilhada e a segunda é sólid.

Código CSS:

hr {
      border-top: 1px dashed #f00;
      border-bottom: 1px solid #f00;
      color: #fff;
      background-color: #fff;
      height: 4px;
    }

Visualização:

Espero que tenham gostado da dica.

Abraços

Alguém aí já teve a experiência de trabalhar com um código mal feito?

É eu tive. Alias estou passando por esta experiência agora. Estou trabalhando em um site aqui na empresa, onde um designer, ou melhor, suposto designer, criou um código horrível para o seu template, e para quem sobrou mexer??? Alguém adivinha?

A minha sorte é que o website ainda não foi ao ar e são poucas as páginas que o compõe. Meu trabalho está sendo de remendar e recriar. Estou re-aproveitando tudo o que for possível, o que não for eu apago e faço denovo.

Ahhh, detalhe, o site é em tableless, com um conjunto de divs e mais divs espalhadas e um css totalmente desorganizado. (que sorte eu tenho )

Pois é, mas a minha pergunta a vocês é a seguinte:
O que vocês acham mais fácil, criar novamente todo o código do site ou remendar tentando consertar?

Ontem coloquei no ar mais um dos websites da empresa, o www.pasajebarato.com. Este é um website de uma empresa de viagens(Pasaje Barato) em espanhol para residentes de todo o mundo.

Neste projeto eu estive envolvido no re-design completo do site, além da atuação na programação também.

Todo o template foi refeito utilizando técnicas de tableless combinando com a programação em PHP e bancos de dados MySQL.

Achei um trabalho muito bacana e deu pra notar que construir um website em tableless para você é uma coisa, mas fazer para os outros é ouuuuuuuutros quinhentos hehehe.

Hoje aqui no serviço eu recebi uma requisição de corrigir um problema em alguns siteminhas no qual as tabelas no IE7 ficavam pretas! Incrivel! Eu logo pensei, putz, deve ser algum bug.

O curioso foi o que eu descobri:

O programador fez o código da seguinte maneira: atribuiu a uma TR a propriedade bgcolor do html. O IE7 não interpreta isso corretamente e exibe a cor de fundo como preto. É isso mesmo, fica tudo preto!

A solução foi colocar um estilo via CSS e daí funcionou perfeitamente.

Curiosidade ou não, achei legal postar aqui. Eu deveria ter pego um screenshot.

Como alguns puderam observar, estou fazendo mudanças no template do blog. Espero que compreendam os erros atuais e gostaria que enviassem sugestões.

Edit: Terminei as alterações de hoje. Tenho a impressão de que existem alguns erros no IE. Tenho que checar. Qualquer coisa me avisem.

Hoje eu tive um problema muito interessante aqui na empresa. Eu precisava colocar um hack para o Mozilla e assim eu diferenciava do IE. Era coisa simples e tal, mas quando vi que o IE 7 pegou o hack do mozilla daí sim foi um problema hehehe.

Dei uma garimpada na net e achei como faz….

Segue abaixo o exemplo que encontrei:

/* Target IE7 only */
html>body #getquotebox {
*background: url(../images/loginbox-bg.jpg) 10px left no-repeat;
}
/* end */

Note o asterísco na frente da propriedade.