20 de março de 2012

Criando favicon e colocando ele no blog

Favicons (palavra derivada de favorite (favorito) e icon (ícone)) são pequenas imagens no formato *.ico com de cerca de 16x16 pixels que ficam guardados em um site para visualização pelo navegador. Em alguns navegadores como Internet Explorer até a versão 6, só exibem os favicons quando um site é adicionado aos favoritos. Neste caso, apenas no menu correspondente aos favoritos pode-se encontrar a imagem. Em outros navegadores como Firefox, Opera e Internet Explorer 7(+), os favicons podem ser encontrados também nas abas e na barra de endereço.

Os favicons também tem teor de acessibilidade pois ajudam um usuário comum a identificar uma página quando ela está exibida em uma lista ou em uma barra de abas. Visando isto, muitos favicons são imagens simplificadas do logotipo da marca que representam.
Na ausência de um favicon, os navegadores exibem seu próprio ícone ou um ícone padrão como uma folha em branco.

Criando o favicon

Iremos usar a ferramenta FavIcon Generator, o processo é fácil aqui, importe a sua imagem ou crie uma nova apenas usando as ferramentas do site. O legal é que nessa ferramenta tem como criar favicon animado, como se fosse uma gif (no canto inferior da imagem tem a opção de expandir o recurso Use Animation, clique ele e faça como quiser a sua animação de favicon).
Tudo o que você fizer no quadrado da imagem irá aparecer no Preview. Depois deixar do jeito que quiser o seu favicon, localize o botão Download Icon, que está localizado abaixo do Preview.

Upload do favicon

Para colocar o FavIcon no blog precisamos fazer o upload do mesmo para que consigamos o seu link direto. Esse passo é fácil, eu recomendo usar o imageshack. Depois de se cadastrar no site, é chato mas é rápido, você poderá usufruir dos recursos do imageshack, segue abaixo a imagem explicativa:



clip_image002

Após feito o upload você terá seus links, o link que você precisa é o LINK DIRETO. Sua imagem está pronto para ser colocada no blog!

Adicionando o favicon no blogger

  1. Acesse o blogger.com
  2. Clique em Design
  3. Em Elementos da página
  4. Encontre o quadro Favicon e clique em Editar
  5. Abrirá nova página de Configurar favicon
  6. Clique no botão Selecionar arquivo...

    Abrirá uma janela, escolha e clique na sua imagem e depois no botão Abrir, Concluir ou algo nesse sentido.

  7. Clique em SALVAR e, na página que ficou aberta também, só para garantir e não perder o costume...




Adicionando o favicon no WordPress

Envie a imagem com o favicon que você pretende alterar para a pasta onde estão as imagens do seu blog wordpress. Agora clique em "Aparência” > “Editor” e selecione o arquivo "functions.php”. Cole o código abaixo e pronto.

function childtheme_favicon() { ?>
<link rel="shortcut icon" href="<?php echo bloginfo('stylesheet_directory') ?>/imagens/favicon.png" >
<?php }
add_action('wp_head', 'childtheme_favicon');

Pronto, agora você tem um favicon personalizado e adicionado no seu blog!

13 de março de 2012

Remover comentários do Intense Debate em páginas estáticas

Como vocês já sabem eu uso o Intense Debate como sistema padrão de comentários e no entanto havia uma coisa que me incomodava muito no começo. Eu tenho páginas estáticas no blog com seus estilos próprios e logo após de adicionar o Intense Debate, BOOM!! Minhas intocáveis páginas estáticas estavam com espaço para comentários, mas aí me acalmei e pensei: ‘Com certeza tem como desabilitar a funcionalidade do Intense Debate através de alguma configuração no site ou na caixa de comentários dentro do próprio blog’, pois é, aí que eu entrei em desespero pois não tinha, alias, até tem uma função que ameniza (que por sinal, faz parte do passo-a-passo que vou ensinar para vocês) mas não tira completamente.

Primeiro Passo

O primeiro passo é simples e é igual tanto quanto no WordPress quanto no Blogger, vamos até a página estática que você não quer que apareça os comentários do Intense Debate. Logue no seu usuário (precisa ser o admin do Intense Debate) e então clique em Admin Options e marque a caixa Disable comments for this page e então salve, Save Settings.

image

A tela irá ficar assim:

image

Vamos à solução para retirar de uma vez, inclusive o Commentings Disabled.

No WordPress
  • No dashboard do WordPress entre em: Aparência –> Editor;
  • Tenha certeza que o seu tema está selecionado em “Selecione o tema para editar”;
  • Clique em comments.php
  • Digite o código seguinte antes do primeiro <?php
if(!comments_open())echo '<style type="text/css">#idc-container-parent { display: none !important }</style>';
  • Então clique em atualizar arquivo.
Uma alternativa caso não consiga com o passo acima é adicionar o seguinte estilo no site http://www.intensedebate.com/edit-site-css/

#idc-container-parent #idc-container .idc-message {
display: none;
}

No Blogger


Encontre o código <body>, ACIMA dele cole o seguinte código:

<!-- Static page styling Start-->

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>


<style type='text/css'>#idc-container-parent { display: none !important }</style>


</b:if>


<!-- Static page styling End –>




Pronto, os comentários do Intense Debate não irão mais te incomodar nas páginas estáticas! Espero que tenham gostado.

11 de março de 2012

Escrever no blog com Windows Live Writer

Se você é como eu e passa por maus bocados tentando editar o seu post na sua plataforma de blog, tanto quanto Blogger quanto Wordpress, eis a solução, Windows Live Writer.

Windows-Live-Writer-Logo


O que é Windows Live Writer?

Windows Live Writer é um software que faz parte do grupo de aplicações Windows Live desenvolvido pela famosa Microsoft. Sua principal função é fornecer uma interface simples para escrever, editar e publicar postagens em blogs.


Sistemas de blog compatíveis

  • Windows Live Spaces;
  • Blogger;
  • Live Journal;
  • TypePad;
  • Wordpress;
  • MetaWeblog;
  • Movable Type;
  • Todos os blogs com suporte à RSD.


Recursos

Possibilidade de formatar textos com os recursos avançados de um editor de textos.

  • Quatro modos de exibição:
    • Normal: Somente conteúdo do post.
    • Web layout: Visual apenas da parte do blog onde será publicado o post.
    • Web preview: Apenas visualização. Exibe o post inserido no blog.
    • HTML code: Código html apenas do post.
  • Efeitos básicos de edição de imagem;
  • Publicação direta no servidor do blog;
  • Recursos recentes de postagem em blogs tags;
  • Possibilidade de adição de mapas do Windows Live Local

Instalação

O Live Writer faz parte do pacote Windows Live, que contém também o Live Messenger, por exemplo. Assim, se você tem o Messenger instalado em sua máquina, é possível que você já tenha também o Writer. Procure-o na pasta “Windows Live” do menu de programas do Windows.

Caso ele não esteja lá, basta fazer o download gratuito em http://download.live.com/writer. A instalação é muito simples, bastando seguir os passos mostrados pela ferramenta.

Configuração

Uma vez instalado, é hora de configurar a ferramenta para escrever em seu blog. Para isso, basta seguir os passos abaixo:

  1. Entre no menu “Blogs”, “Adicionar conta de blog”.
  2. Na tela, selecione o tipo do seu blog. Caso ele seja um blog do Blogger ou Wordpress, selecione a opção “Outro serviço de blog”. Clique em “Próximo”.
  3. Digite o endereço do seu blog, ex: http://tecnofaqs.blogspot.com , o seu nome de usuário e senha que você usa para acessá-lo. Se você é a única pessoa a utilizar o Writer, seu trabalho será facilitado se marcar a opção “Lembrar minha senha”. Clique em “Próximo”.
  • Neste momento, a ferramenta se conectará ao seu blog e baixará os arquivos necessários para exibir o layout da sua página enquanto você escreve. Dependendo de sua velocidade de conexão, esta etapa pode demorar um pouco.
  • Se o processo foi realizado com sucesso, será exibida uma tela para você confirmar o nome com que seu blog será exibido no Writer. Nessa mesma tela, você pode escolher a opção “Compartilhar meu blog no Windows Live”. Se clicar nessa opção, serão exibidas mensagens em seu Messenger a cada novo artigo que você publicar.


    Utilização

    O que me fez gostar mais do Live Writer foi a sua utilização, é muito simples e rápido de se adaptar, após realizar os passos de instalação e configuração será aberta uma página em branco para você escrever uma nova postagem. Basta escrever um título para ela na parte superior da tela e escrever o que deseja dentro do post.

    Espero que tenham gostado dessa breve explicação, para quaisquer dúvidas que tiver referente ao software, deixe um comentário que eu ajudarei no que tiver ao meu alcance.
  • 9 de março de 2012

    Criar logo texto simples com reflexo usando Gimp

    Este tutorial tem como objetivo ensinar algumas técnicas para iniciantes e intermediários,o resultado final é a imagem acima, um logo texto com reflexo usando um dos layers que eu disponibilizei para download no post anterior.

    Como eu ainda não postei um resumo de todas as ferramentas do Gimp, então terei que fazer um tutorial super detalhado, me desculpem os usuários mais experientes mas assim que eu postar esse resumão eu irei fazer um tutorial mais sucinto e leve.


    Vamos lá!

    Passo 1
    Inicie o Gimp (de preferência a versão mais atualizada, download aqui).
    Iremos criar um novo arquivo: File > New Layer, o tamanho que eu usei foi 420x300 e então iremos selecionar a ferramenta de texto e fazer um pequeno quadrado para entrarmos no campo de texto, digite o que você quiser (se for algo muito grande você terá que criar um novo arquivo com uma maior width/largura.
    ferramenta de texto


    Passo 2
    Tem uma ferramenta do Gimp 2 que é essencial para fazer qualquer tipo de tarefa, ela se chama Layers, no segundo passo iremos primeiramente adicionar essa ferramenta de Layers (Figura 1 e 2) caso ainda não tenha ela na sua barra de ferramentas, depois de adicionada iremos mudar o Layer do texto para Main Text e iremos marcar o quadrado do Lock (Figura 3).
    adicionar ferramenta de layer e mudar o nome do layer para main text

    Passo 3
    Agora iremos usar como exemplo um dos Layers que eu disponibilizei aqui no blog neste post, caso você não tenha feita o download e nem queira fazer, não se preocupe, eu irei ensinar aqui mesmo como fazer um gradiente legal.

    Primeiramente iremos adicionar a Tab de Gradientes (Figura 1), depois de adicionada a tab iremos clicar em new gradient (Figura 2), renomearemos o gradiente para "Web 2.0 Grey Blue 3D" (Figura 3). Clique com o botão direito em qualquer lugar do Gradiente que está na tela e iremos editar tanto quanto a setinha da esquerda quanto a setinha da direita (Figura 4), na setinha da esquerda (Left Endpoint's Color) iremos colocar dentro do HTML notation o seguinte código hexadecimal: 6291c0, na da direita (Right Endpoint's Color) iremos colocar cce6f9, está pronto o seu gradiente, irá ficar igual à Figura 5.
    adicionar ferramenta de gradiente e criar a nova cor para o exemplo


    Passo 4
    Agora que temos o gradiente, selecione a ferramenta Blend Tool e selecione na tab dos gradientes a nossa nova cor (Web 2.0 Grey Blue 3D).
    ferramenta blend tool


    Passo 5
    Iremos fazer um traço com a ferramenta de cima para baixo (Figura 1), tente não fazer até o final pois o efeito fica mais legal, faça o mais próximo possível da Figura 1, o resultado irá parecer com a Figura 2.
    usando o blend para traçar o nível de gradiente


    Passo 6
    Na ferramenta de layer clique em Main Text com o botão direito e selecione a opção Alpha to Selection.
    selecionando o layer


    Passo 7
    Feito, iremos em 'Select > Grow', iremos aumentar 3 pixels.


    Passo 8
    Iremos criar um novo layer com o nome de Border (Figura 1 e 2) e nesse layer selecionaremos a ferramenta Bucket Fill Tool e alteraremos a cor para o seguinte html notation: 293a47 (Figura 3), pintaremos o nosso texto e ficará igual à Figura 4.


    Passo 9
    Iremos arrastar o nosso border para baixo do nosso texto para fazer um efeito de sombra bem legal.


    Passo 10
    No passo 10, iremos duplicar os 2 layers existentes: Main Text e Borders, na tab de layers clique com o botão direito em cima de Borders e então Duplicate Layers, faça o mesmo com o Main Text. Agora organize os layers para que fique igual a esta imagema abaixo.


    Passo 11
    Agora iremos usar o merge na tab de layers para juntar os 2 layers duplicados para formar o nosso tão esperado reflexo. Clique em Main Text#1 com o botão direito e selecione a opção Merge Down, os 2 layers irão se tornar 1 só, agora renomeie esse layer para Reflection.
    Antes de mover o nosso reflexo, iremos deselecionar tudo, para isso iremos em 'Select > None', selecione a Move Tool e coloque o reflexo abaixo do nosso texto principal.
    ferramenta move tool


    Passo 12
    Agora iremos girar o nosso reflexo com a Flip Tool, depois de selecionada a ferramenta iremos mudar a configuração dela para Vertical Mode, segure o botão esquerdo do mouse de baixo para cima para que vire o reflexo.
    ferramenta flip tool


    Passo 13
    Na tab dos layers clique em Reflection com o botão direito e selecione Add Layer Mask, selecione Black Full Transparency e então em Add.


    Passo 14
    Selecione o Blend Tool e nas opções dele selecione o gradienteFG to RGB (RGB)(Figura 1) e aplique no reflexo de baixo para cima (Figura 2). O resultado será parecido com o da Figura 3.


    Passo 14
    Estamos quase acabando, só falta adicionar um pequeno Glassy Effect.
    Selecione a ferramenta Ellipse Select Tool (Figura 1), coloque no modo Subtract (Figura 1), clique no nosso Main Text na tab Layers com o botão direito e selecione Alpha to Selection, arraste o mouse para pegar aproximadamente metade do seu texto ou aonde você desejar e aperte enter depois de selecionado (Figura 2).


    Passo 15
    Na tab do layer, crie um novo layer e nomeie o mesmo para Glassy Effect, selecione a ferramenta Bucket Fill Toll com a cor Branca selecionada pinte tudo que estiver selecionado com o atalho Shift+Botão Esquerdo do mouse, volte para a tab de layers e mude a Opacity para quanto você achar melhor, eu selecionei 40 de Opacity.

    Pronto! Agora você pode cortar um pouco do reflexo para dar um efeito mais elegante, espero que tenha gostado.

    Download Layers Web 2.0 para Gimp



    Com esses gradientes pré-fabricados você pode facilmente criar cabeçalhos, fundo de tela, botões e quase todo o tipo de webdesign no Gimp, ao invés de ficar criando vários layers, a única coisa que você terá que fazer é aplicar o gradiente com a ferramenta de preenchimento do Gimp.

    Abaixo as 30 cores gradientes:

    Instalação:
    A instalação é fácil, baixe o arquivo AQUI, extraia o arquivo e copie todos os arquivos .GGR para a pasta gradients que fica em: C:\Users\[Nome do Usuário\.gimp-2.6\gradients (Isso no Windows 7)

    Caso tenha qualquer dúvida deixe um comentário que eu irei ajudar!

    Gimp, um poderoso editor de imagens


    Atualmente no mercado há inúmeros softwares para o tratamento e edição de imagens profissionais, no entanto a maioria deles são pagos e geralmente muito caros. Para a felicidade dos usuários foi desenvolvido o The Gimp, um poderoso e avançado editor de imagens, assim como o Adobe Photoshop porém de código aberto e totalmente gratuito.

    O The Gimp foi criado originalmente para o Linux, mas agora ganhou uma versão para Windows. Embora seja grátis, ele não fica devendo nada aos programas mais famosos da categoria: são milhares de recursos, entre filtros e efeitos — capazes de fazer mágica com quaisquer imagens. Além da grande quantidade de ferramentas, o programa oferece um conjunto de scripts que permitem aumentar os efeitos indeterminadamente, dando mais liberdade ao usuário.

    Download da versão mais atualizada do momento: Gimp 2.6.11

    7 de março de 2012

    Corrigindo erro de instalação (b:if) do Intense Debate no Blogger


    No post anterior explicamos como instalar e usar o Intense Debate, agora irei ensinar como corrigir o erro de template que ocorre algumas vezes ao usar o Blogger.

    O erro é o seguinte, ao tentar copiar o código de instalação do Intense Debate para o local do template do Blogger, aparece a seguinte mensagem:

    Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente.
    Mensagem de erro em XML: Element type "b:if" must be followed by either attribute specifications, ">" or "/>".


    Vamos corrigi-lo então, depois que pegar o código providenciado pelo Intense Debate
    Iremos colar ele em um bloco de notas, pressionar CTRL+F para abrir a caixa de procura e procurar o seguinte:
    <b:if cond='data:post.allowComments'
    No final deste código iremos acrescentar um sinal de maior que '>'

    O código ficará assim:
    <b:if cond='data:post.allowComments'>
    Esse é um dos erros que podem ocorrer na tentativa de instalar o Intense Debate, estou a procura da solução do erro de string '--', assim que conseguir solucionar irei postar aqui também.

    Apresentando Intense Debate, um poderoso sistema de comentários

    O que é Intense Debate?

    Intense Debate é um sistema de comentário automatizado que ajuda e muito nas discussões do blog, fazendo com que o leitor participe mais do seu site.


    Instalação

    Primeiramente entraremos no site, clique em 'Sign Up', preencha os campos e no final do formulário você pode escolher entre duas opções, a primeira você apenas cria uma conta para comentários no Intense Debate e a segunda você cria a conta para comentários e ainda tem a opção de instalar no seu blog (são 4 as opções de instalação, WordPress, Blogger, TypePad e Tumblr), vamos escolher a segunda opção (sinta-se a vontade de escolher a primeira caso queira criar uma conta somente para comentários). Automaticamente você vai receber um e-mail de ativação, verifique o seu e-mail e clique no link de ativação.

    Na próxima tela você ira digitar o endereço do seu blog.
    O Intense Debate identifica automaticamente qual é o sistema que você está usando (Blogger, WordPress, Tumblr e TypePad).
    No meu caso eu usei um endereço blogger, você terá que fazer o download do seu template através do painel de configuração do blogger, seguindo este caminho:
    Design > Editar HTML > Baixar modelo completo
    Volte para a tela do Intense Debate e clique em 'Selecionar Arquivo', navegue até o local no qual você salvou o seu template e faça o upload do seu arquivo.
    Após feito o upload, você irá receber um código XML dentro do frame abaixo do passo 2, apenas clique nesse frame e copie (CTRL+C)
    Depois de copiado, voltaremos ao 'Editar HTML' do Blogger clique em cima do código da caixa do código do seu blog, pressione CTRL+A para selecionar o código inteiro e então cole o seu código que o Intense Debate gerou (CTRL+V), visualize para ver se deu tudo certo e pronto, instalamos um dos melhores sistemas de comentários automatizado no seu blogger! :)


    Recursos

    O Intense Debate oferece um leque muito grande de recursos, abaixo falarei sobre os principais:
    • Sistema de avatar, o usuário pode fazer o upload do seu próprio avatar (pode ser editado em 'Edit Profile' > 'Picture' ;
    • Sistema de pontuação, cada curtir que X usuário receber em algum post, ele recebe pontos, para que fique melhor ainda tem um widget que mostra os 'Top Users' do site, os que mais receberam pontos (encontrado em 'Extras' > 'Widgets');
    • Layout totalmente alterável, você pode modificar praticamente tudo, cores, quais são os tipos de ferramentas que podem ser usado na integração de comentários (Twitter, OpenID)
    • Ótimo sistema de widgets, contando com 'posts mais comentados', 'top users', 'comentários recentes'.
    • Sistema traduzido para Português (Brasil), para alterar vá em 'Settings' > 'Accounts'

    Claro que têm muitos outros recursos, para isso faça o teste e veja se gosta, eu recomendo!

    6 de março de 2012

    Apresentação

    Esse blog é fruto de um imenso prazer que eu sinto ao conseguir solucionar, criar e modificar qualquer que seja o assunto relacionado à tecnologia.
    Pretendo mostrar tutoriais, dicas e truques sobre os mais variados aplicativos, sistemas operacionais e gadgets disponíveis no mercado mundial.

    Meu nome é Victor Hugo Filgueiras, formado em Sistemas de Informação, uma pessoa alucinada por tudo que envolve tecnologia.



    A idéia geral deste blog é compartilhar com vocês tudo que eu sei à respeito de design (gimp2, photoshop), desenvolvimento (tal como html, css, java) e tudo que envolva tecnologia.

    Espero que gostem do conteúdo do mesmo, manterei atualizado diariamente com novos tutoriais, dicas e truques.