Sou a Helen Fernanda e aqui compartilho dicas, resenhas e tutoriais sobre perfumes, Android, streaming, TV, séries, livros, idiomas e outros recursos que nos libertam do tédio.
A maioria das tags de HTML 5 ainda não funciona do mesmo jeito em todos os navegadores, então temos que usar gambiarras. Um exemplo é a tag <mark>, que colore o background do texto com a cor amarela, da mesma forma que uma caneta marca texto que usamos no papel.
Este post mostra como usar o sistema de comentários do Facebook como livro de visitas do Blogger. O recurso pode ser aplicado em qualquer site que permita frames e JavaScript.
Nem preciso dizer o quanto amo HTML, acho que está bem explícito no nome do blog, mas me faltava fazer aqui um post dando dicas para quem quer realmente aprender e dominar essa linguagem. Uma coisa é você saber um código ou outro para usar em seu blog, no orkut ou em sua assinatura de e-mail; outra é conseguir fazer uma página ou um site inteiro começando do zero, sem precisar de template pronto, um exímio designer de interfaces.
Para fins didáticos, neste post as seguintes expressões serão utilizadas com o mesmo sentido:
O Firefox 4 é rápido e lindo de viver, mas na minha opinião involuiu em um ponto importante: ele não exibe mais, por padrão, o ícone de feed.
Esta dica é para quem usa o formulário de comentários embutido no post. O mesmo procedimento poderá ser usado para fazer o contrário: aumentar o espaço em branco ou remover uma barra de rolagem indesejada em volta do formulário.
Por padrão, a altura (height) do frame onde é postado o comentário vem com 410 pixels. Se seu blog apresentar um espaço em branco sob o formulário é porque esse valor pode ser diminuido até melhor se ajustar. Se o formulário de seu blog apresentar barra de rolagem ou parecer espremido, você pode aumentar essa altura.
Quem trabalha com posts cheios de imagens já está careca de saber que a tag <br/>, quando solitária, não resolve todas nossas necessidades de quebra de linha. Quando você incrementa mais a diagramação do post precisa ter um controle maior das quebras de linha para que fique tudo no seu devido lugar.
Quando desejamos colocar um vídeo em um blog, no orkut, no MySpace ou outro site que permita isso, basta clicar no botão Incorporar <Embed> que o próprio YouTube nos dá algumas opções de personalização de cores e tamanhos.
As âncoras são os links que redirecionam para outro trecho dentro de uma mesma página. Quando se usa esse tipo de link não há o recarregamento da página, a barra de rolagem do navegador apenas se movimenta movimenta para chegar à parte indicada no link. É por isso muita gente chama também de link de rolagem.
Eu uso muito esse recurso porque alguns posts do Meu Tédio são longos, já que gosto de fazer listas de referência e tutoriais passo a passo.
Nível: intermediário
Em julho de 2008 publiquei o post Inverta a ordem do texto na barra de título no novo Blogger, onde eu mostrava uma dica do Usuário Compulsivo para colocar o nome do post antes do nome do blog.
Usei esse recurso durante bastante tempo, mas há alguns meses descobri outro melhor e mais simples, que coloca o nome do blog por último também quando o leitor estiver na página de um marcador ou de uma data. Veja alguns exemplos do próprio HTMHelen.
Nível: avançado
Desde de que passei a usar bordas arrendondadas (corner rounded) por aqui, há vários leitores pedindo que eu conte, em português, como se usa esse recurso. Neste blog não uso aquelas gambiarras complicadas para que os cantos das bordas apareçam curvos em todos os browsers.
O adjetivo “automáticas” é por minha conta. Eu chamei esse recurso assim porque há várias formas manuais de dividir o conteúdo em colunas com CSS.
Muitas pessoas se enganam e acham que tableless é desenvolver sites sem usar tabela alguma. Traduzindo, tableless significa menos tabelas e não ausência de tabelas.
Não é algo que deva ser usado sem moderação, mas caixas com barras de rolagem podem ser úteis em algumas situações, como quando você tem que disponibilizar um código muito grande ou quando existe a possibilidade do conteúdo ser expandido dinamicamente e assim deformar o leiaute, só para citar dois exemplos.
O valor auto é o que faz a barra aparecer somente quando o conteúdo da caixa extrapola o tamanho determinada na tag <div>.
A maioria dos tutoriais sobre HTML e CSS deste blog são aplicados a Blogger. Tenho percebido que a maioria dos blogueiros que frequentam o HTMHelen, mesmo depois de anos, ainda são totalmente dependentes de tutoriais, não conseguindo criar uma linha de código sozinhos. Talvez isso se deva ao fato de que os tutoriais aplicados dispensam o blogueiro de raciocinar para encontrar uma solução, de forma que realmente não precisa aprender as linguagens: basta copiar e colar.
Conheço a propriedade text-shadow desde que me entendo por aprendiz de CSS, mas só agora o seu uso é viável por estar funcionando bem nos navegadores modernos que buscam ser fiéis aos padrões W3C.
Apesar de ainda não funcionar no Internet Explorer, os usuários dos navegadores Chrome, Firefox, Opera e Safari já se beneficiam desse recurso, que é cada vez mais utilizado em webdesign.
Personalizar as cores de muitos dos códigos disponibilizados neste blog exige o entendimento das cores RGB ou o acesso à tabela de cores para acessar esses códigos.
Caso seu template tenha sido feito a partir de algum modelo original do Blogger, use o primeiro tutorial: Personalizando o avatar nos comentários.
Alguns leitores já estavam reclamando problemas para personalizar o avatar nos comentários por usarem templates Wordpress convertidos para Blogger. Eu estava sem tempo para ver melhor isso, até que resolvi ativar o recurso de avatar em um dos blogs que administro e que usa template Wordpress convertido. Vou partilhar aqui os códigos que resolveram a minha situação.
Uma das coisas que eu espero que você faça sempre que publica um post é verificar se todos os links externos estão realmente abrindo em uma nova aba/janela.
Normalmente fazemos isso de forma manual: clicando em um por um e verificando se está tudo nos conformes. Só que em posts com dezenas de links esse procedimento pode ser simplificado com o uso do navegador Safari.
Caso seu template seja convertido do Wordpress, siga o tutorial: Personalizando avatar nos comentários de templates convertidos (Wordpress para Blogger).
O Marcos Lemos (Ferramentas Blog) é gente boa demais! Ele faz um tutorial ensinando a colocar avatar nos comentários e no próprio post deixa uma cobrança disfarçada de elogio para nós (Ariane, HTMHelen, Juliana Sardinha e MamaNunes) fazermos posts ensinando a personalizar o recurso.
A lista de blogs receberá o alinhamento da coluna em que está inserido. Você pode mudar o alinhamento de toda a coluna, mas isso vai afetar os outros elementos dela e pode trazer um resultado indesejado.
Seguem algumas opções de personalização do CSS para mudar o alinhamento dos ítens das listas de blogs no Blogger.
Quando a lista de blogs tem snippets (trechos iniciais) dos posts mais recentes, justificar o texto quase sempre é o alinhamento preferido. Para isso basta ir até Layout » Editar HTML e inserir na folha de estilos do Blogger (acima da tag ]]></b:skin>) o seguinte código:
Até mais!
