O retorno da salsicha

"Que a salsicha esteja com você"

Olá a todos! O nome da postagem é só por ter lembrado do filme mesmo.

Pra quem achava que o blog tinha morrido - e tinha mesmo - vou tentar ressuscitá-lo postando todos os rascunhos de postagens que deixei por fazer/terminar. São mais de 100 postagens, fora um volume grande de dados que deixei guardado no meu computador e nos meus favoritos. Algumas, como a que vou postar logo depois desta aqui, por serem coisas que fiz faz mais de dois anos, podem faltar explicações por não me lembrar mais como fiz tudo. Mas, serve como um norte né?

Problemas de imagens com o designer de modelo.

Olá galerinha do LeGauss.

Recentemente, como vocês perceberam, nós mudamos nosso layout. Mas um grande problema atrapalhou bastante a nossa mudança e nesse post vou colocar a solução.

Como colocar um favicon em seu site

Definitivamente esta não é uma tarefa fácil. Há casos em que isto torna-se simples, principalmente quando você testa o resultado com o navegador correto. Vamos tentar falar um pouco sobre como fazer para ter seu favicon em algum site qualquer mostrando, ao final, uma pequena diferença entre os navegadores atualmente disponíveis. Vamos dividir entre um caso particular, o que o site em questão é um blog do blogger, e um caso mais geral.

Sobre os favicons

Os favicons, também conhecidos como Ícones do Website ou Ícone de URL, é um ícone, de no mínimo 16x16 px², usualmente no formato png e salvo no formado ico [0], associado a uma url ou a um website. Na imagem abaixo, identificamos com uma circunferência perfeita vermelha (clique para ampliar a imagem).


Ficou com preguiça de fazer o seu? Veja aqui alguns favicons de graça. O nosso foi feito pelo Tiago J. Fonseca e está hospedado no servidor Stoa, veja aqui.

Incluindo seu favicon em seu blog

Mais uma vez, esta seção dedica-se especificamente a blogs hospedados no blogger [1]. Para adicionar seu favicon, primeiro o desenhe e hospede em algum servidor. Há inúmeros servidores em que você pode hospedá-lo, basta apenas que você tenha o endereço de sua imagem.

Vá em layout e selecione Editar HTML. Assim, você verá todo o código html de seu blog. Procure a seguinte tag em no código html de seu blog:

<title><data:blog.pagetitle/></title>

Na linha seguinte a esta tag, insira

<link href="'ENDEREÇO COMPLETO DA IMAGEM'" rel="'shortcut" type="'image/vnd.microsoft.icon'/">

Feito isso, abra seu blog e verifique se o favicon está lá. Se não estiver, verifique o endereço. Caso esteja correto, verifique se você adicionou a linha indicada no local correto. Se este também não for seu problema, post um comentário. Talvez possamos ajudar com a experiência que tivemos [2].

Praticamente acabamos. Só há um único problema, que citaremos mais abaixo. Vamos extender as discussões a quaisquer tipos de sites e o problema que discutiremos se aplica também aos blogs.

Adicionando seu favicon em algum site

Vamos expandir o que mostramos anteriormente para qualquer site e, em tese, até para outros serviços de blog que permitem ao usuário a edição de seus código html.

Originalmente, e considerando que você rode seu site em um servidor seu ou em que você possa usar livremente, bastaria adicionar uma imagem no diretório raiz, no formato ico com área 16x16 px², e o favicon já estaria definido. Automaticamente, o servidor passaria para o navegador o favicon.

Atualmente, temos como especificar via html a localização do favicon. Para fazer isto, temos que localizar o cabeçalho, que geralmente está entre as tags <head>, e adicionar dentro do cabeçalho uma tag <link>, assim como fizemos na seção anterior:

<link href="'http://img49.imageshack.us/img49/630/faviconer3.png'" rel="'shortcut" type="'image/vnd.microsoft.icon'/">

Para alguns navegadores, a imagem pode inclusive ser png ou gif [0]. Bastaria então utilizamos um script bem simples de Ajax para verificar qual navegador o usuário estaria usando para selecionar a melhor figura.

Pareceu difícil? Nem para mim: na verdade é praticamente igual ao modo como mostramos para o blogger, só que neste caso mais geral temos que localizar o cabeçalho. No entanto, transcreverei abaixo algumas palavras da Wikipédia.

However, Microsoft Internet Explorer only truly supports icons that have a legitimate extension of Microsoft Icon Files and that are coded in the icon file format. Many webmasters have changed their preferred image's extension to .ico without first actually converting them to Microsoft Icon Files. This created a conflict that Microsoft Internet Explorer cannot resolve; such icon images will not be displayed.

Tradução: Entretanto, o Microsoft Internet Explorer apenas suporta por completo ícones que têm a extensão Microsoft Icon Files e que são salvos no formato ico (...). Isto significa que se seu favicon não for .ico e não estiver legitimadamente com a marca Microsoft Icon Files, então seu favicon simplesmente não será exibido no Internet Explorer. Isto não seria um problema se, e só se, menos de 20% do planeta usasse este navegador. No entanto, mais de 80% do planeta (quase o complementar) usa (e não muda) este navegador, que já causa problemas há muito tempo.

Conclusão: use seus favicons no formato ico e os converta para o formato Microsoft Icon Files (provavelmente o Fireworks já faça isso automaticamente).

Conclusão do artigo

Se você tem um blog e gostaria de receber bem seus visitantes, dê atenção a questões como as diferenças entre os navegadores, uma das quais apresentadas logo acima. Vimos como é fácil adicionar um favicon em um blog ou site sem nos preocuparmos muito com o servidor. Para tirar quaisquer dúvidas, post comentários.

Para mais artigos sobre como deixar seu blog mais LeGauss, veja este índice.

Notas:

• [0] Alguns navegadores aceitam png ou gif, mas não o Internet Explorer, para o qual não fornecerei link algum.
  
• [1] Em outros serviços, nós não testamos. Caso você tenha tido essa experiência, poste um comentário!
• [2] Alguns blogs parceiros receberam auxílio.
  

Agendando Posts

Você sabia que no Blogspot[1] é possível alterar a data da postagem? É um botão chamado "Opções de postagem" no canto inferior esquerdo da caixa onde se digita o conteúdo do post - esta na qual estou digitando agora ;-). Ao clicar nesse botão, são abertas - até a data de lançamento deste humilde post - duas opções: Permitir ou não comentários e data e hora da postagem.

Permitir comentário é a opção padrão e a data e hora da postagem é sempre colocada para o momento no qual você começou a fazer seu post.Caso você coloque a data e hora para um momento do passado, o texto é postado instantaneamente e colocado na lista de postagens como se tivesse sido postado no dia que você especificou.

Agora vem a parte interessante, se você colocar uma data e hora futuras, o post só será publicado nessa hora. Assim se publica posts quando você está ocupado ou sem conexão com internet - supondo claro, que você já tivesse escrito o post. Este truque também ajuda em casos como o do blog LegGauss, que possui muitos colaboradores e fica chato quando todos publicam muito ao mesmo tempo - muitas mensagens para ler, algumas acabam se perdendo. Assim, podemos escrever nossos posts e deixá-los para serem publicados automaticamente no dia seguinte.

Notas

[1] Talvez outros blogs façam isso também, mas como não uso, desconheço. Quem tiver o conhecimento, que por favor divida conosco.

Edição Blogspot para você!

Reunirei aqui todos os posts que demonstram como alterar seu blog (quando hospedado no Blogspot/Blogger) e as alterações que realizamos em no Legauss. Assim como alguns usuários bem observaram, essas alterações trazem um ar de único para um blog, e muitas vezes usuários, donos de blogs, não muito experientes com css ou html, podem sentir-se menosprezados por não conseguirem obter aquele design que sempre sonharam um dia fazer. Esperamos que todos os posts relacionados abaixo ajudem estes usuários, assim como abrimos um canal direto (via e-mail) para possíveis dúvidas e/ou sugestões.

Faixas separadoras de seções usando CSS

Aqui mostramos como usar o seu css para disponibilizar faixas que separam o texto principal de apêndices, como post scriptum ou notas de rodapé.

Mais: separadores de seções em posts

Que tal darmos mais ênfase à separação de seções em seus textos? Mostramos aqui um jeito interessante e simples, usando apenas uma modificação na css do blogs.

Dicas para utilização das notas de rodapé

Quem nunca quis fazer notas de rodapé linkadas, assim como no Wikipédia? Ensinamos como fazer de modo muito simples aqui.

Vamos brincar com

Neste post, ensinamos como utilizar LaTeX sem a necessidade de instalar nada em servidor algum ou em navegador algum.

Links para expandir no Blogger

Sabe aquele Leia mais que a gente encontra naqueles blogs fabulosos? Aqui nós mostramos como nós estamos utilizando. Se você quiser também inserir isso em seu blog, entre em contato!

Agendando posts

Veja como fazer para agendar posts com o blogger para não mais se preocupar em ter que salvar seus textos no bloco de notas.

Como colocar um favicon em seu site

Mostramos como definir um ícone para representar seu site na lista de favoritos de seus internautas, tal como ao lado do endereço.

Notas importantes:

Este post é constantemente atualizado: à medida em que surgem novos posts que se enquadrem neste perfil, vou os incluindo. Para críticas, comentem!

Links para expandir o texto no Blogger

Ao final de todas os posts do Legauss, podemos ver o link Continue lendo... em azul e negrito. Esta é uma ferramenta amplamente utilizada em blogs de famosos, e facilita a leitura daqueles que usam Leitores RSS ou os que seguem nosso blog usando o blogspot.

Como em qualquer alteração, há aqueles que gostam e há aqueles que não gostam. O método que estamos utilizando faz com que, ao clicar em Continue Lendo..., o leitor seja enviado para a página estática (endereço fixo de cada post), onde também pode comentar. É uma maneira também de sugerir a inserção de um comentário. Eu copiei este método ao ver ele em uso no blog pessoal de Maurício Tuffani.

Aos editores: como utilizar?

O método que estamos usando é simples e traz poucas mudanças para os posts. Na verdade, é possível escrever o post naturalmente e só fazer as modificações que descrevo abaixo ao acabar.

O texto que deve aparecer ao carregar a página do Legauss deve ser escrito normalmente. Em geral, este é um resumo que já deve dar uma boa idéia aos leitores sobre o tema que será tratado. Ao terminar esta parte, o resto do post deverá estar entre as tags:

<span class="fullpost">
-- TEXTO AQUI! --
</span>

Assim, tudo o que for substituído por --TEXTO AQUI! -- não será exibido até que o usuário clique no link para continuar.

Se algum bloguer também interessar-se por esta técnica, entre em contato. Por favor, comentem o que vocês acharam desta nova funcionalidade (em principal, os visitantes). Apesar de nem todos os editores ainda terem editados seus posts antigos, já podemos ter uma idéia de como vai ficar.

Vamos brincar com ?

Alguém aí sabe me dizer qual o valor de

para quaisquer valores de ?

Não se preocupe se você não souber responder: apenas leia este artigo para se informar. Mas gostaria de chamar a atenção a outro detalhe: existem maneiras alternativas ao MathML ou ao mimetex para inserirmos equações em nossos posts. No que segue, daremos conselhos específicos para usuários do blogspot.

Para fazer isto, usamos o CodeCogs, que abriga um software que gera imagens automaticamente das equações assim que requisitado. No site, podemos criar equações de forma livre e verificar como elas ficam na hora, obtendo como resultado uma figura. É possível copiarmos a figura e adicionarmos em um post.

Há outro jeito um pouco mais esperto. Toda imagem é gerada usando um truquezinho. A integral pode ser gerada gerada com a tag

<img src="http://www.codecogs.com/eq.latex?\int x dx" />

Note que é a tag que indica uma imagem endereçada ao CodeCogs, terminando com a expresão em da equação que desejamos exibir. De forma geral, basta utilizar

<img src="http://www.codecogs.com/eq.latex?--CÓDIGO LATEX--" />

Não é necessário editar em modo html, basta inserir o código. Se a imagem não aparecer, mude para a edição html e volte imediatamente para o modo texto (denominado Escrever).

No caso de outros serviços de blog, como a WordPress, também é possível usar o serviço. Não há diferenças, basta inserir o código html de uma imagem endereçada como mostramos acima.

Detalhes:

É extremamente importante tomar cuidado com o css de seu blog antes de brincar com essas coisas. As equações são imagens, e portanto estas imagens podem ter customizações ruins no css. Em nosso caso, utilizamos a seguinte customização para alinhar melhor as imagens ao texto:

.post img {
margin-top:0;
margin-$endSide:0;
margin-bottom: -3px;
margin-$startSide: 0;
padding:0px;
border:0px solid $borderColor;
}

Esta não é a customização padrão do blogspot.

Dicas para a utilização das notas de rodapé

Como tenho visto, não apenas no LeGauss, a utilização destas faixas de rodapé e divisões de seções, assim como as que propomos. Existem ainda alguns métodos que podemos utilizar para melhorar a qualidade de nossos textos, mesmo que tornem-se bem mais complexos (ao menos se a html não for gerada automaticamente). Vamos tentar ligar as seções e notas de rodapés com links internos ao post, algo próximo às referências cruzadas do LaTeX.

Links para trechos do post

Há como criarmos links que movem o navegador para outro trecho de uma mesma página. Assim, podemos criar links para modificar o trecho do post que desejamos que o usuário leia. Isto é feito usando a tag âncora <a> , com diferentes atributos.

Primeiramente, damos nome a um trecho do texto, para o qual desejamos enviar o navegador quando chamado por algum link. Para tal, usamos o atributo name, da forma

<a name="NOME" > Texto marcado </a>

Assim, marcamos o trecho para onde desejamos enviar o navegador. Para enviá-lo, usamos o link criado por

<a ref="#NOME" > texto do link </a>

Com isso, enviamos e retornamos com o texto agilmente [1] para trechos específicos do post.

Conclusão

Assim temos mais um detalhe para valorizar os textos que escrevemos por esse mundão. Um comentário sobre isso tudo: montar coisas assim é extremamente trabalhoso, portanto a melhor saída é sempre utilizar isto nos textos em que isto torna-se preciosamente importante (textos longos, por exemplo).

Acho que sobre o tema, estamos quites. Se tiverem sugestões de fru-frus outras decorações, enviem por comentários ou e-mail.

Notas:

[1] Utilizamos estas chamadas rápidas para ligar esta nota de rodapé à sua própria chamada no texto.

Mais: separadores de seções em posts

Como estamos construindo ainda nosso blog e foi demonstrado interesse pelas faixas separadoras, achei que pudesse ser interessante também implementarmos separadores de seções. Em textos longos eu costumo usá-los, mas não como os que temos em nosso CSS agora. São divisores de seções para dar melhor hierarquia ao texto dos posts.

Como funcionam os headers

Em html, existem tags muito especiais: os cabeçalhos h1, h2, h3... Estas tags formatam o texto gerando certo grau de hierarquia, sendo h1 o texto que deve estar mais aparente. Pode ser utilizado, por exemplo, como título de seções. Subseções dentro de uma seção formatada com h1 podem ser formatadas com h2 ou algum outro menor.

Atualmente, com a possibilidade de usarmos CSS (ao menos em quase todo navegador), os cabeçalhos são excelentes ferramentas de customização. Por exemplo, em meu blog pessoal eu uso as faixas separadoras que descrevo em meu primeiro post como o h4. Assim, se eu aplicar algum texto como cabeçalho h4, ele será exibido na mesma forma daquela faixa separadora.

Divisão de seções em posts

De forma similar às faixas separadoras, poemos definir um divisor de seções usando apenas uma linha abaixo do nome da seção e aplicando cores diferentes no texto. Isto já é um estilo bem interessante.

Em nosso CSS, como não utilizávamos o cabeçalho h4, resolvemos customizá-lo da seguinte forma:

h4
{
border-bottom: 3px solid #d6d0cc;
font-weight: normal;
color: #0f0f0f;
font-size: 10pt;
}

Assim, para criar as divisões das seções mostradas acima, apenas aplicamos a formatação no nome da seção, algo como

<h4> Subdivisões de seções em posts </h4>

Temos assim o resultado apresentado neste post.

Post scriptum

1. Como as cores que eu propus inicialmente não estavam muito boas, atualizei algumas vezes este post e com a ajuda de Ponhovo Loreno conseguimos encontrar cores boas para estas seções. Portanto, agradecimentos sinceros ao referido internauta.
2. Ponhovo Loreno sofre de daltonismo e confunde vermelho com verde.
   

Faixas separadoras de seções usando CSS

Olá, caros colegas.
Meu nome é Thiago e estou postando pela primeira vez no LeGauss, um blog dedicado ao que vem na cabeça dos editores temas nerds ou geek. Decidi começar minha contribuição escrevendo sobre algo sobre o que estou muito interessado.

Mantenho um blog mais pessoal em que uso como separação do texto com minhas notas de rodapé umas faixas azuladas [1]. A idéia é simplesmente organizar os textos, e resolvi aplicar aqui esta brincadeira.

Trata-se de mais uma das fabulosas invenções das folhas de estilo em cascata (CSS), que são conjuntos de atribuições feitas em separado ao código html de uma página. Há diversos textos bem completos que ensinam como utilizar estas folhas de estilo, dentre os quais sugiro o tutorial dado pela w3school.

Para utilizar estas faixas, utilizo o seguinte código em minha CSS, baseada em um estilo Facebook:

.notas
{
background:#faf7e2 none repeat scroll 0%;
border-bottom:1px solid #d6d0cc;
border-top:1px solid #d6d0cc;
color:#677284;
line-height:1.5em; padding:0px 4px;
}

Isto significa que se inserirmos o código

< div class="notas"> Notas: < /div >

teremos como resultado algo similar à seção notas abaixo [2]. Esta sintaxe pode ser compreendida com um pouco de estudo do tutorial que sugeri, mas para rapidamente compreendermos: ao adicionar a atribuição .notas, estamos criando uma classe que, quando aplicada sobre algum texto, caracteriza este texto com suas definições.

Espero poder ter dado alguma idéia de como fazer isto. Se alguém tiver alguma dúvida, sinta-se à vontade para entrar em contato. Para testar seus conhecimentos em css, veja que nós também temos uma classe codigo, que está aplicada aos códigos acima descritos.

Notas:

• [1] Podemos ver como exemplo aqui.
• [2] Se você verificar
  

Post scriptum:

Agradeço profundamente aos outros editores pelo convite.