Margens e espaçamento interno

Nível: intermediário

Margens (margin) e espaçamento interno (padding) ajudam a manter seu blog bonito e fácil de ler. Em muitos casos é só isso que falta para que a página fique realmente agradável.

Não são raros os blogs todo “espremidinhos” que encontro todo dia, em que o título “disputa” espaço com o texto que “briga” com as imagens. Muito desagradável. Em qualquer design o espaço em branco é muito bem-vindo quando utilizado corretamente. Muitos dos casos de elementos espremidos em blogs e outros sites podem ser resolvidos com margin e padding.

Margin

A margem é o espaço externo. Se minha casa fosse um elemento HTML, a margem dela seria a calçada. Quando um elemento utiliza margens, ele está dizendo a cada um dos demais: Hei, mantenha-se a pelo menos X pixels de mim, ok?

Calçada surrupiada do Panóptico

Texto com margem

Código:

<div style='margin-top:4px; margin-bottom:5px; margin-left:100px; margin-right:7px;'>Neste exemplo de texto, as margens foram definidas na própria tag.<div>

Visualização:

Neste exemplo de texto, as margens foram definidas na própria tag.

Texto e imagem com margem

Código:

<img style='margin:5px; margin-right:100px;' src="http://lh5.ggpht.com/_HlIyV_enpD8/SWvvyg33EGI/AAAAAAAACH4/crZKTiaSiP0/s400/yahoo.jpg" align='right' />Observe que a imagem tem margem de 100px à direita e 5px nos outros três lados, de forma que não atrapalha a visibilidade do texto.

Visualização:

Observe que a imagem tem margem de 100px à direita e 5px nos outros três lados, de forma que não atrapalha a visibilidade do texto.

Padding

Se margin é a calçada, padding é o quintal, o espaço entre o muro (bordas) e o elemento (espaço construído da casa). Vejamos alguns exemplos:

Exemplo sem padding

<div style='border:1px solid black;'>Este é um texto sem padding, observe que as bordas estão encostando no texto e deixando a aparência um tanto quanto desagradável.</div>

Visualização:

Este é um texto sem padding, observe que as bordas estão encostando no texto e deixando a aparência um tanto quanto desagradável.

Exemplo com padding 1

<div style='border:1px solid black; padding:5px;'>Este é um texto com padding, observe que usei a mesma medida dos quatro lados.</div>

Visualização:

Este é um texto com padding, observe que usei a mesma medida dos quatro lados.

Exemplo com padding 2

<div style='border:1px solid black; padding:5px; padding-left:50px; padding-right:10px;'>Este é um texto com padding, observe que usei medidas diferentes dos quatro lados.</div>

Visualização:

Este é um texto com padding, observe que usei medidas diferentes dos quatro lados.

Margin e padding

Exemplo de código:

<div style='text-align:justify; border:1px solid salmon; height:228px; padding:5px;'><img style='margin:5px;' src="http://lh5.ggpht.com/_HlIyV_enpD8/SWvvyg33EGI/AAAAAAAACH4/crZKTiaSiP0/s400/yahoo.jpg" align='right' />Observe que o elemento div tem padding de 5px que é o espaço entre as bordas e o texto e entre as bordas e a imagem, enquanto a imagem tem margin de 5px que é a distância entre ela e o texto.</div>

Como fica:

Observe que o elemento div tem padding de 5px que é o espaço entre as bordas e o texto e entre as bordas e a imagem, enquanto a imagem tem margin de 5px que é a distância entre ela e o texto.

Na folha de estilos

Para mudar as margin e padding de qualquer elemento na folha de estilos é muito simples também. Veja o exemplo:

h2 {padding:5px; margin-top:10px; margin-bottom:5px;}
blockquote {padding:5px; padding-left:50px;}
body {border:0px; margin:0px; padding:5px;}
blockquote #cita {margin-top:5px; margin-bottom:10px; margin-left:25px; margin-right:50px;}
]]></b:skin>

Divirta-se!

Reforma ortográfica

Eu não estou aqui para ensinar, já que ainda estou aprendendo. Sempre que tenho que escrever palavra com hífen, por exemplo, fico em dúvida e tento substituir por algum sinônimo. Pior ainda são as palavras que não tinham hífen e passam a ter. Jornalistas, blogueiros, professores, vestibulandos, concurseiros… todos em estado de nervos com essas mudanças. Imagine então eu, que sou jornalista-blogueira-concurseira? Loucura!

📚 Dois sites imperdíveis para bibliófilos

Divulgue sua estante!

Popularmente, denominamos de bibliófilo aquele que costumar ler com muita frequência.

Wikipédia

Descobri neste fim de semana dois sites em português que leitores assíduos de livros vão curtir muito.

Skoob - partilhe resenhas

Caso você já esteja cadastrado no Goodreads, o Skoob tem a mesma função: partilhar resenhas de livros. Você adiciona os livros que já leu, que está lendo, que pretende ler… A vantagem é que é brasileiro e assim fica mais fácil encontrar outros livros editados no Brasil. A minha estante está no endereço skoob.​com.​br/​perfil/​helenfernanda. Sugiro que olhe os livros que pretendo ler e escolha um para me dar de presente. 😁

Trocando Livros

Bem, se você não me der nenhum um livro de presente, não há problema. Eu já me cadastrei no Trocando Livros. O objetivo do site é só esse mesmo: trocar livros. Para começar, cadastre os livros semi-novos que você quer disponibilizar para outras pessoas lerem. Aguarde até alguém solicitar um de seus livros e mande. Quando você manda um livro ganha crédito para poder solicitar livros de outras pessoas. Legal, né? Esse site eu descobri no Canto da Lu.

Mais dicas de sites em português para bibliófilos serão sempre bem-vindas!

Top 10 de janeiro/2009

Muitas ultrapassagens neste Top 10

Os blogs que mais trouxeram visitas entre os dias 10/12/2008 e 09/01/2009 foram:

1. Mestre Blogger
2. Templates para Você
   A segunda vice-liderança é fruto de um link no post Templates para Você » Aprenda HTML e CSS.
3. Trendy Twins
   O nosso link está no post Trendy Twins » Mais Selinho.
4. TidBits
   O link para o HTMHelen no post TidBits » Lista de blogs em português sobre desenvolvimento web e TI rendeu muitas visitas este mês.
5. Chris B.
6. Lucky Star Downloads
7. NanoSecond's
8. bloggerspheres
9. Bubuzando na Net
10. Dicas para Blogs
    As visitas vieram de um único comentário no post Dicas para Blogs » Redirecionamento

Os blogs em negrito são os que estão pela primeira vez na lista. Sejam bem-vindos ao Top 10 do HTMHelen e voltem sempre!

Como foi dito no primeiro Top 10, não foram mensuradas as visitas vindas de blogs que ainda mantêm o link antigo htmhelen.helenfernanda.com, já que essa URL apenas redireciona para o novo endereço e não tem o código do Google Analytics para ser rastreada.

Jogos e temas gratuitos para Nokia 6120 classic

Como já citei por aqui, meu ócio criativo atualmente têm sido descobrir as funções e distrações de um smartphone que São Pedro me arranjou.

Jogos gratuitos

Uma das diversões desse ócio é baixar jogos gratuitos. Todos sabem que um celular com bons e variados joguinhos instalados é diversão garantida em qualquer fila, seja a do banco ao do Restaurante Cidadão. Tio Cidinho, depois a gente acerta o jabá!

Vaguei bastante por sites que diziam ter jogos gratuitos, mas eram pagos; dizia que o jogo era compatível com meu celular, mas não era; ou o download ela naquela porcaria do rapidshare.com, além de outros contratempos.

As férias foram lindas…

Minhas férias foram ótimas, vi vovó, vi muitas titias, vi titios, vi primos, vi filhos de primos, vi tia-avó, vi Chitãozinho & Xororó na Esplanada… Foram férias “família”. Aliás, ainda não tive oportunidade de ter outro tipo de férias.

Virada premiada do BlogBlogs

Nível: intermediário

Demorei, mas finalmente vou colocar aqui o esqueleto dos códigos CSS que utilizei ao fazer meus novos widgets de últimos leitores BlogBlogs para participar da promoção Virada Premiada.

📻 Lista de rádios FM de Goiânia

Atualizado dia 21/11/2015.

Este post continuará no ar registrando um momento da minha história, mas não será mais atualizado. Para conferir as atuais rádios FM de Goiânia, visite o site Line Up.

Esta lista nasceu de uma necessidade pessoal. Agora tenho um celular com rádio FM e configurei todas as rádios FM de Goiânia nele para ouvir quando precisar saber notícias locais, já que não tenho TV em casa.

O link correto do seu perfil no orkut

Nível: iniciante

Esta dica para blogueiros e orkuteiros iniciantes foi por mim adiada várias vezes porque parecia óbvia demais, mas me enganei, já que é algo que as pessoas estão sempre errando e perguntando, seja por e-mail, bate-papo e comentários nos blogs.

Uma das melhorias que o orkut está devendo desde seu lançamento é a URL amigável, como no MySpace [www.myspace.com/helenfernanda], no Hi5 [helenfernanda.hi5.com] e muitas outras redes sociais.

Enquanto seu perfil não tem uma ID bonitinha e fácil de decorar, você tem que saber copiar seu link para poder divulgar para seus amigos do messenger e até para colocar no seu blog. Então vamos ao que interessa:

Copiando o link

1. Já logado no orkut, clique no link perfil:

2. Copie o endereço que aparecerá na barra de endereço:

Deve ser algo parecido com:

http://www.orkut.com.br/Main#Profile.aspx?uid=4616533830522855769

No exemplo, o que identifica meu perfil é esse número indecorável que vem depois de uid=.

Link no blog

Para colocar o link para seu perfil em seu blog, você pode usar o código abaixo, sendo que a parte em destaque deve ser substituída pelo link do seu perfil:

<a href='http://www.orkut.com.br/Main#Profile.aspx?uid=XXXXXXXX' target='_blank'>Visite meu orkut!</a>

Visite meu orkut!

Para fazer um link com as cores do orkut:

<a href='http://www.orkut.com.br/Main#Profile.aspx?uid=XXXXXXXX' target='_blank' style='background:#dee7f7; color:#A05B91;'>meu orkut</a>

meu orkut

Primeiro post de 2009

Cheguei a Goiânia há cerca de 2h30, mas já tenho algo a contar e retomar as minhas atividades aqui no HTMHelen.

Page Rank

Soube agora mesmo pelo TidBits que o Google fechou 2008 atualizando o page rank. Fui conferir no Site Page Rank como meus blogs se saíram. O Helen Fernanda Ponto Com subiu de 3 para 4 no rank e todos os demais estreiaram com page rank 3.

VejaBlog

Uma das formas de aumentar seu page rank e outros índices de popularidade é cadastrar seu blog em diretórios e sites de busca. Um dos sites com esse objetivo que descobri recentemente é o VejaBlog. O HTMHelen já foi aceito por lá.

Para ver mais dicas de sites onde você pode divulgar seu blog, visite a tag cadastre-blog do meu del.icio.us que está sempre atualizada com os diretórios que descubro.