Posts sobre navegadores

Código do Abu Farhan | Personalizado por Mundo Blogger

Como colocar o Flock em português

Eu descobri algo tão fantástico hoje a noite que meu coração está acelerado até agora: um complemento que coloca o menu do meu queridíssimo Flock em português. Testei tanto no Ubuntu 9 quanto no Windows XP e o resultado é o mesmo.

Nomes de guerra do Firefox

Este post é uma curiosidade sobre o Firefox.

Quem de alguma forma trabalha com tecnologia e fica atento às novidades já deve ter percebido que cada versão do navegador Mozilla Firefox tem um codinome, um verdadeiro nome de guerra.

Meus blogs

Este post se tornou uma página: jornalista.helenfernanda.com/p/meus-blogs.html.

Como centralizar os anúncios do AdSense

Nível: iniciante

Para centralizar os anúncios do AdSense que são adicionados entre os posts do Blogger, basta ir até Layout ≫ Editar HTML e colocar o seguinte código na folha de estilos do blog, ou seja, acima da tag ]]></b:skin>:

#main-wrapper div.inline-ad {text-align:center; margin:30px; margin-left:auto; margin-right:auto;}
]]></b:skin>

Observe que eu aproveitei para aumentar a distância entre o anúncio e o texto usando margin:30px, já que a ausência desse espaço em branco é outro fator que torna os anúncios visualmente menos agradáveis. Você pode alterar esse número para que o anúncio se adeqúe melhor ao leiaute de seu blog.

Até mais!

29 temas para Google Chrome 3+

Já fazia alguns dias que estava usando o Google Chrome 3 Beta (agora já estou no 4), mas só ontem comecei a experimentar o recurso de temas. Eu, particularmente, amei essa possibilidade. Como já contei aqui, não é de hoje que estou enjoada desse azul-cueca-velha que o Google usa tanto no orkut como no Chrome, então a possibilidade de mudar muito me entusiasma.

Para ter acesso ao recurso de temas sem nenhuma gambiarra, é preciso ter o Chrome 3 ou 4 para Windows ou uma das versões em desenvolvimento para Mac e Linux.

É importante lembrar que nenhuma das versões está em fase final, isso significa que podem ser encontrados bugs. Estou usando o Chrome no Ubuntu 9 e o Chrome 4 no Windows XP e não tive problemas, mas recomendo que não instale se estiver em dúvida. Links para download:

• Google Chrome para Mac
• Google Chrome para Linux

Windows XP e Vista:

• Google Chrome 3 Beta
• Google Chrome 4 Beta
• Google Chrome 3 Beta Portable

Após instalar a versão de testes desejada, entre na Galeria de Temas e experimente. Ao clicar, você salva os temas em uma pasta pessoal. Assim, sempre que quiser trocar as cores do Chrome basta ir direto à pasta e clicar no tema desejado, sem precisar visitar a galeria novamente. A maioria dos temas são muito belos, como estes cinco que selecionei:

Candy

Cork Board

Floral Blue

Marble

Vertical Stripe

Assim como no Opera, não é preciso reiniciar o navegador para ver as modificações, basta aguardar o tempo de download do arquivo de tema. Sempre que quiser voltar à cor original, basta aplicar o tema Classic ou acessar Opções » Personal Stuff » Themes » Reset to default theme.

Divirta-se!

Li e recomendo “Cartas Entre Amigos”

Em maio deste ano a jornalista carioca Patrícia Haddad participou do lançamento do livro Cartas Entre Amigos: sobre medos contemporâneos e escreveu um simpático post em seu blog falando do livro, do lançamento e do hábito de escrever cartas, do qual fui fiel praticante durante quase cinco anos de minha adolescência - cheguei a contar 300 amigos por correspondência ao mesmo tempo de quase todos os estados do Brasil e de Portugal. O texto enxuto, informativo e bem ilustrado da Patrícia foi o que me incitou o desejo de ler o livro.

Dois meses depois eu ainda não tinha lido Cartas Entre Amigos, mas me deparei com outro texto, dessa vez do jornalista goiano Rafael Carneiro que sugestivamente escolheu o título A boa surpresa para falar da obra. Rafael, católico praticante, encerra o seu texto dizendo:

Católico, não me espelho necessariamente em homens como o Padre Fábio ou Gabriel Chalita. Mas me encanta ver imagens diferentes dos meus achismos em outros espelhos. Católico, me espelho muito nessa generosidade. Os generosos são surpreendentes.

O texto do Rafael, que não é membro da Renovação Carismática Católica, reavivou meu desejo de saborear o livro. Por motivos financeiros, só este mês tive condições de comprá-lo. A leitura, fácil e prazerosa, durou menos de três noites e já escolhi uma pessoa querida da minha família a quem vou presentear com o mesmo exemplar que li. Sou de uma corrente que defende que lugar de livro não é na estante, mas sim a trinta centímetros do nariz de um leitor.

Gabriel Chalita e Padre Fábio têm narrativas muito parecidas. São poéticos, filosóficos, conselheiros, defensores do amor. Várias vezes, ao longo das dezoito cartas, eu me via perdida por alguns segundos tentando me lembrar quem escrevia para quem, até que encontrava algum vocativo dizendo “padre”, que é como Gabriel trata Fábio, ou “Gabriel”, que é como o padre chama o doutor em direito. Os vocativos “amigo” e “irmão” são comuns a ambos.

As cartas são repletas de testemunhos nos quais identificamos pessoas conhecidas de nosso convívio familiar e social, se não nós mesmos. Ao contrário do que eu imaginava antes, Fábio e Gabriel não fazem apologia ao catolicismo em si. Suas cartas são apologias ao amor, que está acima de qualquer religião. As frases são tão belas e definitivas que eu poderia fazer dezenas de citações aqui, mas vou encerrar com um parágrafo da décima terceira carta, escrita por Gabriel Chalita:

Somos avarentos porque temos medo de perder dinheiro, invejosos porque temos medo do sucesso do outro, ciumentos porque temos medo de que alguém roube o que fantasiamos nos pertencer. Arrogantes, porque temos medo de que percebam nossas fragilidades. Egoístas porque temos medo de dividir a rede. Preguiçosos porque temos medo da luta. Agressivos porque temos medo do amor.

Paz e bem!

Helen Fernanda

Membro do MCS Goiás

perfil.helenfernanda.com

Fontes compatíveis com Linux

Não são poucos os blogueiros que se assustam quando olham as fontes do próprio blog pela primeira vez em um outro navegador ou em outro sistema operacional. Isso ocorre simplesmente porque as fontes instaladas nos mais diversos sistemas operacionais não são as mesmas.

Como usuária de Windows XP e Ubuntu 9, vou listar o que considero como possíveis soluções para que blogueiros que usam Windows consigam definir suas fontes corretamente de forma que usuários Linux não sejam prejudicados.

CSS | Como personalizar a fonte

Este post foi atualizado em agosto/2009.

As propriedades em CSS que modificam a fonte são:

1. font-family
2. font-style
3. font-variant
4. font-weight
5. font-size
6. font

Família da fonte

Definimos o família de fonte com font-family:

<div style="font-family: 'Lucida Bright', serif">Este texto vai aparecer com a fonte Lucida Bright se você tiver ela instalada. Caso contrário, ele será mostrado com a fonte serifa padrão de seu navegador.</div>

Este texto vai aparecer com a fonte Lucida Bright se você tiver ela instalada. Caso contrário, ele será mostrado com a fonte serifa padrão de seu navegador.

Ao escolher a fonte, podemos definir a espécie (times new roman, verdana…) ou o gênero (serif, sans-serif) da fonte.

Serif
<div style="font-family:serif">Este texto vai aparecer com a fonte de serifa padrão de seu navegador.</div>	Este texto vai aparecer com a fonte de serifa padrão de seu navegador.
<div style="font-family:georgia, serif">Este texto vai aparecer com a fonte Georgia, mas se você a desinstalou, vai aparecer a fonte serifa padrão do navegador.</div>	Este texto vai aparecer com a fonte Georgia, mas se você a desinstalou, vai aparecer a fonte serifa padrão do navegador.
<div style="font-family:garamond, serif">Este texto vai aparecer com a fonte Garamond, mas se você a desinstalou, vai aparecer a fonte serifa padrão do navegador.</div>	Este texto vai aparecer com a fonte Garamond, mas se você a desinstalou, vai aparecer a fonte serifa padrão do navegador.
<div style="font-family:'Monotype Corsiva', serif">Este texto deve aparecer com a fonte Monotype Corsiva, mas se ela não existe em seu computador, aparecerá com a fonte serifa padrão do navegador.</div>	Este texto deve aparecer com a fonte Monotype Corsiva, mas se ela não existe em seu computador, aparecerá com a fonte serifa padrão do navegador.
Sans-serif
<div style="font-family:sans-serif">Este texto vai aparecer com a fonte sem serifa padrão de seu navegador.</div>	Este texto vai aparecer com a fonte sem serifa padrão de seu navegador.
<div style="font-family:verdana, sans-serif">Este texto deve aparecer com a fonte Verdana, mas se ela não existe em seu computador, aparecerá com a fonte sem serifa padrão do navegador.</div>	Este texto deve aparecer com a fonte Verdana, mas se ela não existe em seu computador, aparecerá com a fonte sem serifa padrão do navegador.
<div style="font-family:trebuchet ms, sans-serif">Este texto deve aparecer com a fonte Trebuchet MS, mas se ela não existe em seu computador, aparecerá com a fonte sem serifa padrão da máquina.</div>	Este texto deve aparecer com a fonte Trebuchet MS, mas se ela não existe em seu computador, aparecerá com a fonte sem serifa padrão da máquina.
<div style="font-family:'Arial Rounded MT Bold', sans-serif">Este texto deve aparecer com a fonte Arial Rounded MT Bold, mas se ela não existe em seu computador, aparecerá com a fonte sem serifa padrão do navegador.</div>	Este texto deve aparecer com a fonte Arial Rounded MT Bold, mas se ela não existe em seu computador, aparecerá com a fonte sem serifa padrão do navegador.
Monospace
<div style="font-family:monospace">Este texto vai aparecer com a fonte monoespaçada padrão de seu navegador.</div>	Este texto vai aparecer com a fonte monoespaçada padrão de seu navegador.
<div style="font-family:'OCR A Std', monospace">Este texto deve aparecer com a fonte OCR A Std, mas se ela não existe em seu computador, aparecerá com a fonte monoespaçada padrão do navegador.</div>	Este texto deve aparecer com a fonte OCR A Std, mas se ela não existe em seu computador, aparecerá com a fonte monoespaçada padrão do navegador.
<div style="font-family:'Lucida Console', monospace">Este texto deve aparecer com a fonte Lucida Console, mas se ela não existe em seu computador, aparecerá com a fonte monoespaçada padrão do navegador.</div>	Este texto deve aparecer com a fonte Lucida Console, mas se ela não existe em seu computador, aparecerá com a fonte monoespaçada padrão do navegador.
<div style="font-family:courier new, monospace">Este texto deve aparecer com a fonte Courier New, mas se ela não existe em seu computador, aparecerá com a fonte monoespaçada padrão do navegador.</div>	Este texto deve aparecer com a fonte Courier New, mas se ela não existe em seu computador, aparecerá com a fonte monoespaçada padrão do navegador.
Cursive
<div style='font-family:cursive;'>Este texto deve aparecer com a fonte <b>cursiva</b> padrão do navegador.</div>	Este texto deve aparecer com a fonte cursiva padrão do navegador.
<div style="font-family:'Lucida Calligraphy', cursive;">Este texto deve aparecer com a fonte <b>Lucida Calligraphy</b> ou com a fonte cursiva padrão do navegador.</div>	Este texto deve aparecer com a fonte Lucida Calligraphy ou com a fonte cursiva padrão do navegador padrão do navegador.
Fantasy
<div style='font-family:fantasy;'>Este texto deve aparecer com a fonte <b>fantasy</b> padrão do navegador.</div>	Este texto deve aparecer com a fonte fantasy padrão do navegador.
<div style='font-family:Impact, fantasy;'>Este texto deve aparecer com a fonte <b>Impact</b> ou com a fonte <b>fantasy</b> padrão do navegador.</div>	Este texto deve aparecer com a fonte Impact ou com a fonte fantasy padrão do navegador.

Estilo da fonte

Definimos o estilo da fonte com font-style:

<div style='font-style:inherit;'>Com inherit o texto segue o estilo herdado da tag onde estiver inserido.</div>	Com inherit o texto segue o estilo herdado da tag onde estiver inserido.
<div style='font-style:normal;'>Com normal o texto segue a inclinação padrão do tipo.</div>	Com normal o texto segue a inclinação padrão do tipo.
<div style='font-style:italic;'>Com italic o texto fica inclinado para a direita.</div>	Com italic o texto fica inclinado para a direita.
<div style='font-style:oblique;'>Com oblique o texto fica inclinado para a direita.</div>	Com oblique o texto fica inclinado para a direita.

Essa propriedade não causa qualquer alteração em fontes que não têm a opção de estilo itálico.

Variação da fonte

Definimos a variação da fonte com font-variant:

<div style='font-variant:inherit;'>Com <strong>inherit </strong>a fonte terá a mesma <i>variant</i> que o elemento no qual a tag está inserida.</div>	Com inherit a fonte terá a mesma variant que o elemento no qual a tag está inserida.
<div style='font-variant:normal;'>Com <strong>normal</strong> a fonte fica assim.</div>	Com normal a fonte fica assim.
<div style="font-variant: small-caps;">Com <strong>small-caps</strong> a fonte fica assim.</div>	Com small-caps a fonte fica assim.

Antes de tirar conclusões erradas, observe atentamente a diferença entre um texto com small-caps (maiúsculas menores) e um texto com uppercase (maiúsculas):

<div style='font-variant:small-caps;'>Eu, Helen Fernanda, mantenho voluntariamente o blog HTMHelen, atualizando-o nas minhas horas livres com assuntos que interessam a blogueiros iniciantes.</div>	Eu, Helen Fernanda, mantenho voluntariamente o blog HTMHelen, atualizando-o nas minhas horas livres com assuntos que interessam a blogueiros iniciantes.
<div style='text-transform:uppercase;'>Eu, Helen Fernanda, mantenho voluntariamente o blog HTMHelen, atualizando-o nas minhas horas livres com assuntos que interessam a blogueiros iniciantes.</div>	Eu, Helen Fernanda, mantenho voluntariamente o blog HTMHelen, atualizando-o nas minhas horas livres com assuntos que interessam a blogueiros iniciantes.

Espessura da fonte

Definimos a espessura da fonte com font-weight:

<div style="font-weight:inherit;">Com <em>inherit</em> o texto segue o padrão do elemento em que a tag está inserida.</div>	Com inherit o texto segue o padrão do elemento em que a tag está inserida.
<div style="font-weight:bolder;">Com <em>bolder</em> o texto fica em negrito.</div>	Com bolder o texto fica em negrito.
<div style="font-weight:bold;">Com <em>bold</em> o texto fica em negrito.</div>	Com bold o texto fica em negrito.
<div style='font-weight:normal;'>Com <em>normal</em> o texto fica com a espessura padrão.</div>	Com normal o texto fica com a espessura padrão.
<div style='font-weight:lighter;'>Com <em>lighter</em> o texto fica mais claro que o normal.</div>	Com lighter a fonte fica menos espessa que o normal.

Além dos exemplos supracitados, esta propriedade também aceita valores numéricos de 100, 200, 300… até 900.

Tamanho da fonte

Definimos o tamanho da fonte com font-size:

Valores absolutos
<div style="font-size:xx-large">Com <em>xx-large</em> o texto fica muito maior.</div>	Com xx-large o texto fica muito maior.
<div style="font-size:x-large">Com <em>x-large</em> o texto fica maior.</div>	Com x-large o texto fica maior.
<div style="font-size:large">Com <em>large</em> o texto fica grande.</div>	Com large o texto fica grande.
<div style="font-size:medium">Com <em>medium</em> o texto fica mediano.</div>	Com medium o texto fica mediano.
<div style="font-size:small;">Com <em>small</em> o texto fica pequeno.</div>	Com small o texto fica pequeno.
<div style="font-size:x-small;">Com <em>x-small</em> o texto fica menor.</div>	Com x-small o texto fica menor.
<div style="font-size:xx-small;">Com <em>xx-small</em> o texto fica muito menor.</div>	Com xx-small o texto fica muito menor.
Valores relativos
<div style="font-size:smaller;">Com <em>smaller</em> o texto fica menor do que estava antes.</div>	Com smaller o texto fica menor do que estava antes.
<div style="font-size: inherit">Com <em>inherit</em> o texto segue o tamanho padrão do elemento ao qual ele pertence.</div>	Com inherit o texto segue o tamanho padrão do elemento ao qual ele pertence.
<div style="font-size:larger">Com <em>larger</em> o texto fica maior do que estava antes.</div>	Com larger o texto fica maior do que estava antes.

Esta propriedade também aceita valores numéricos em pixels (px), pontos (pt) e porcentagem (%).

Todas em uma

Podemos definir todas as cinco características da fonte dentro da propriedade font:

<div style="font:small-caps bold 13px 'comic sans ms';">Texto com várias propriedades em uma só.</div>	Texto com várias propriedades em uma só.
<div style="font:italic bolder 15px 'Lucida Bright';">Texto com várias propriedades em uma só.</div>	Texto com várias propriedades em uma só.

A ordem dos valores na propriedade font é: font-style | font-variant | font-weight | font-size | font-family.

Personalizando a nuvem de marcadores do Blogger

Nível: intermediário

Como muitos de vocês já devem ter lido no Dicas Blogger ou no Ferramentas Blog, o Blogger finalmente implementou nos Marcadores os recursos de: