Será o fim do photoshop?

5 de fevereiro de 2009 por Danival A. Souza  
Arquivado em Photoshop, Web Design

Podemos dizer que o ano de 2008 foi o ano das aplicações online. Diversos aplicativos conforme conhecemos, migrou de desktop para usar o navegador. Editores de texto e planilhas foram os mais evidentes. Também tivemos uma série de softwares de edição de photos online, sendo estes os que eu mais duvidei que pudessem realmente fazer frente aos softwares desktop que temos por aí.

O principal motivo pelo descredito é que você teria que enviar as imagens para o servidor, editar, e então fazer o download delas. Isto torna tudo muito pesado e trabalhoso.

Hoje, lendo o blog do Pixlr, descobri que, em 2 de dezembro de 2008, já havia solução para isto. Aqueles que usassem o plugin do flash 10, não precisariam mais fazer upload <-> Download das imagens. Editaria elas ali, no pc mesmo!

pixlr

Resolvi testar. Entrei no editor através do link: http://www.pixlr.com/editor/
Carregou rapidamente. Apesar de ser uma aplicação online, carregou tão rapido (senão mais rapido) do que o photoshop carregaria nesta máquina. Abri a imagem, e foi instantanea. Fiz algumas modificações básicas, e então salvei.

O programa é excelente, e nos menus você ainda pode trocar o idioma para português. Obviamente não é tão completo quanto o photoshop, mas é um excelente custo benefício, afinal seu custo é zero. No blog, tem alguns tutoriais.

Além deste, existem outros aplicativos online de edição de imagem, veja uma lista:

Splashup

splashup

Phoenix

pheonix

pixer.us

pixelus

FotoFlexer

fotoflexer

SUMO Paint

sumopaint

10 aplicações web úteis para designers

3 de fevereiro de 2009 por Danival A. Souza  
Arquivado em Utilidades, Web Design

Existem diversas ferramentas online, gratuítas, que podem ajudar ao trabalho de um designer e webdesigner no seu dia a dia.

Fizemos uma seleção com dez destas ferramentas. Veja abaixo:

kuler Create

kuler

Kuler é uma aplicação web da adobe, que ajuda você a criar e compartilhar esquema de cores.

pixlr

pixlr

pixlr é um excelente editor de imagens online, com uma aparência semelhante a do photoshop, recursos como layers, filtros e várias ferramentas. Ainda pode selecionar o idioma, para português do Brasil.

Wellstyled’s Color Scheme Generator

ws_color_schemer

Wellstyled’s Color Scheme Generator é uma ferramenta web simples, para ajudar designers a comceber esquemas de cores. Tem uma interface muito intuitiva, e você terá acesso a url do esquema de cores selecionado.

FontStruct

fontstructor

FontStruct é uma ferramenta web para criar, editar e compartilhar fontes. Visite a galeria e veja várias fontes criadas por outros usuários, as quais você poderá utilizar.

Typetester

typetester

Typetester permite você testar e comparar tipografias. Isto tem uma variedade de fontes que incluem fontes web-safe, como Arial e verdana. Mas você também pode usar suas fontes pessoais.

TypeNavigator

typenavigator

TypeNavigator é uma ferramenta web desenvolvida para ajudar a identificar fontes, que você viu mas não sabe o nome.

Dummy Text Generator

dummy_text_generator

O site Dummy Text Generator permite a você gerar texto aleatório. Acho que podemos dizer que é um gerador avançadado de “Lorem ipsum para web designers”.

BGPatterns

bgpatterns

BGPatterns é um site que permite gerar patterns, para background de sites. A ferramenta é muito simples de usar, e consegue assim mesmo ser muito poderosa, permitindo a edição completa de todos os recursos ao gerar o pattern, tais como cor, tamanho, ângulo de inclinação, etc.

favicon.cc

faviconcc

Favicon.cc é uma ferramenta para desenhar favicons. Permite que você crie diretamente do zero, ou se preferir pode fazer o upload de uma imagem, para que seja transformada em favicon.

templatr

templatr

templatr é uma aplicação web para criar templates (layouts) de web sites. Aparentemente, cria templates para o wordpress. É uma ferramenta muito simples de utilizar, e pode ser útil para desenvolver a parte estrutural de um layout.

Compactando o seu CSS com PHP

18 de janeiro de 2009 por Danival A. Souza  
Arquivado em Css, PHP, Programação web, Web Design

Compactar o arquivo CSS é uma das técnicas utilizadas para acelerar o processo de carregamento de um website. Algumas destas técnicas estão sendo amplamente utilizadas. Hoje, iremos descrever três maneiras diferente de compactar os arquivos CSS e enviar ao navegador do usuário, utilizando para isto o PHP.

O método de Paul Stamatiou

Este método já é utilizado por alguns desenvolvedores web a mais de um ano. Para fazer funcionar, você precisa primeiro renomear o seu arquivo NOME.css para NOME.css.php. (onde NOME é o nome do seu arquivo).

Então faça a modificação no HTML, utilizando o novo nome.

<link rel="stylesheet" type="text/css" media="screen" href="/style.css.php"/>

Após alterar o arquivo HTML, renomeie o css conforme informado, e então abra o arquivo para edição. Insira a seguinte linha de código no ínicio do arquivo:

<?php if(extension_loaded('zlib')){ob_start('ob_gzhandler');} header("Content-type: text/css"); ?>

Então, adicione a próxima linha no final do arquivo. Salve, e feche o arquivo.

<?php if(extension_loaded('zlib')){ob_end_flush();}?>

Fim. Este método é bastante útil e eficiente.
Fonte: http://paulstamatiou.com/2007/03/18/how-to-optimize-your-css-even-more

O método Perishable Press

Este método é bem semelhante ao método descrito por Paul Stamatiou. Basicamente, você também precisa renomear seu arquivo .css para .css.php (ou .php somente), alterar a chamada a este arquivo no html para o novo nome, e então adicionar o seguinte bloco de código no início do seu arquivo CSS:

<?php
   ob_start ("ob_gzhandler");
   header ("content-type: text/css; charset: UTF-8");
   header ("cache-control: must-revalidate");
   $offset = 60 * 60;
   $expire = "expires: " . gmdate ("D, d M Y H:i:s", time() + $offset) . " GMT";
   header ($expire);
?>

Em seguida salve o arquivo e feche-o. Com este método, você não precisa alterar o final do arquivo. Basicamente, esta é a grande diferença sobre o método anterior apresentado.

Fonte: http://perishablepress.com/press/2006/10/23/compressed-css-compression/

O método Reinhold Weber

Este método foi escrito pelo desenvolvedor Alemão Reinhold Weber. Particulamente, prefiro este método aos outros. Explicaremos por que mais abaixo. Por hora, vamos ao método.

Primeiramente, crie um arquivo .php, e insira o código abaixo (e coloque todos os seus CSS de include no código):

<?php
  header('Content-type: text/css');
  ob_start("compress");
  function compress($buffer) {
    /* remove comments */
    $buffer = preg_replace('!/*[^*]**+([^/][^*]**+)*/!', '', $buffer);
    /* remove tabs, spaces, newlines, etc. */
    $buffer = str_replace(array("rn", "r", "n", "t", '  ', '    ', '    '), '', $buffer);
    return $buffer;
  }
  /* your css files */
  include('master.css');
  include('typography.css');
  include('grid.css');
  include('print.css');
  include('handheld.css');
  ob_end_flush();
?>

Por que eu prefiro este método? Simples, com este método não é necessário renomear o arquivo .css para .php. Além do mais, este método comprime todos os arquivos CSS utilizados no site de uma única vez, e envia para o computador do usuário através de uma única requisição, o que acelera muito o processo para sites que tem multiplos css (como o exemplo acima).

fonte: http://reinholdweber.com/?p=37

Adicione publicidade no seu rss feed

16 de janeiro de 2009 por Danival A. Souza  
Arquivado em Wordpress

O problema. Ganhar dinheiro através de publicidade nos feed RSS dos blogs tem se tornado uma prática comum, e muitos blogueiros tem feito isto para aumentar os seus ganhos com publicidade. FeedBuder pode inserir publicidade do AdSense dentro dos itens do seu feed, mas você precisa ter pelo menos 500 inscritos para poder usar o recurso, e você só poderá utilizar a publicidade do adsense. Não poderá usar nenhum outro sistema de publicidade, caso utilize este recurso.

A solução. É possível inserir outro tipo de anúncio no seu RSS feed. Você pode, por exemplo, usar um link para um theme grátis do wordpress somente para os leitores do seu RSS.

Siga estes simples passos para fazer esta modificação:

1. Abra para alteração o arquivo functions.php do seu theme. Se o theme que você está utilizando não tem o arquivo functions.php, simplesmente crie um.
2. Cole o seguinte código dentro do arquivo functions.php:

<?php
function insertAds($content) {
    $content = $content.'<hr /><a href="http://www.fazendosites.com.br">Você visitou nosso site hoje?</a><hr />';
    return $content;
}
add_filter('the_excerpt_rss', 'insertAds');
add_filter('the_content_rss', 'insertAds');
?>

Salve o arquivo. Agora o seu feed rss irá exibir os anúncios publicitários.

Explicação: Eu tenho visto muitas modificações para fazer isto na web, mas todas elas requer que você altere o (core) núcleo do seu wordress para que possa funcionar. Claro, alterar o núcleo do wordpress é uma péssima idéia, pois você terá que reaplicar esta modificação toda vez que atualizar o seu blog. Nos fizemos diferente. Com esta modificação apenas no arquivo do theme, usamos a função do wordpress add_filter() para inserir conteúdo diretamente no RSS feed sem a necessidade de alterar nenhum dos arquivos do core do sistema.

Fonte: http://www.wprecipes.com/how-to-insert-ads-on-your-rss-feed

Wordpress: Evitando posts duplicados na página inicial

14 de janeiro de 2009 por Danival A. Souza  
Arquivado em Wordpress

O problema. Com a popularidade recente dos modelos estilo magazine do wordpress, existem muitos usuários que utilizam mais de um loop na página inicial de seus blogs para exibir seus posts. Baseado nisto, surge a necessidade de criar alguma rotina, que evite a duplicação de posts no segundo loop, para eliminar a possibilidade de artigos duplicados na página inicial do site.

A solução. Abaixo uma simples solução para o problema, usando o recurso de arrays do PHP.

1. Vamos começar criando um simples array no php, e gravar todos os IDs dos posts do primeiro loop dentro dele.

<h2>Loop n°1</h2>
 
<?php
$ids = array();
while (have_posts()) : the_post();
the_title();
?>
<br />
 
<?php $ids[]= $post->ID;
endwhile; ?>

2. Agora, o segundo loop: vamos usar a função do php in_array() para verificar se o ID de um post está dentro do nosso array. Se o ID NÃO estiver no array, então ele não foi exibido no primeiro loop, e nós podemos então exibir o seu post.

<h2>Loop n°2</h2>
<?php
query_posts("showposts=50");
while (have_posts()) : the_post();
if (!in_array($post->ID, $ids)) {
  the_title();?>
  <br />
<?php }
endwhile; ?>

Explicação: Quando o primeiro loop é executado, todos os IDs dos posts exibidos nele irão ficar dentro da variável aray que nós criamos. Quando o segundo loop é executado, nós então verificamos se o ID do registro atual não está no array. Caso o ID não esteja no array, significa que ele não foi exibido no loop anterior, então neste caso, podemos exibir o post.

Wordpress: Exibir adsense somente para visitantes do google

13 de janeiro de 2009 por Danival A. Souza  
Arquivado em Seo, Wordpress

O problema. É um fato que os visitantes regulares dos sites não clicam em anúncios publicitários. As pessoas que clicam nos anúncios são, 90% das vezes, visitantes que vieram de sites de busca.

Outro problema é o google “smart pricing” (sistema de preços inteligentes). Este sistema quer dizer que você ganha por clique, proporcional ao seu CTR (click-through rate). Calma, iremos explicar:

O CTR é a taxa que mede a proporção entre a visualização de um anúncio, e quantas vezes ele foi clicado. Com o sistema smart pricing, um anúncio que você poderia ganhar R$1 ,00, você poderá ganhar este valor dividio entre 2 e 10. Ou seja, entre R$0,10 e R$0,50.

Para aumentar o seu CTR e ganhar proporcionalmente mais com o adsense, indicamos exibir os anúncios publicitários do adsense somente para visitantes que vierem através de sites de busca.

A solução:

1. Abra o arquivo functions.php do seu theme.
2. Cole o seguinte código dentro dele:

1
2
3
4
5
6
7
8
function scratch99_fromasearchengine(){
  $ref = $_SERVER['HTTP_REFERER'];
  $SE = array('/search?', 'images.google.', 'web.info.com', 'search.', 'del.icio.us/search', 'soso.com', '/search/', '.yahoo.');
  foreach ($SE as $source) {
    if (strpos($ref,$source)!==false) return true;
  }
  return false;
}

3. Em seguida, cole o código abaixo em qualquer lugar dentro do seu template, onde você deseja que a publicidade do adsense seja exibida. Ela irá então ser exibida somente para visitantes que vierem de sites de busca:

1
2
3
4
5
if (function_exists('scratch99_fromasearchengine')) {
  if (scratch99_fromasearchengine()) {
    INSERT YOUR CODE HERE
  }
}

Explicação: Esta modificação inicia com a criação de uma função chamada scratch99_fromasearchengine(). Esta função contém uma variável do tipo array, chamada $SE, onde você pode especificar os sistemas de busca. Você pode facilmente incluir novos sistemas de busca, adicionando novos elementos ao array.

Então, a função scratch99_fromasearchengine() irá retornar verdadeiro somente se o visitante vier de um site de busca que está incluído dentro da array $SE.

Com um pouco mais de implementação e criativadade, você pode exibir anúncios do adsense para quem vier dos sites de busca, e então exibir uma publicidade própria ou até mesmo conteúdo, aos usuários que acessam o seu site diretamente.

Substituir por paginação os links avançar e voltar do wordpress

7 de janeiro de 2009 por Danival A. Souza  
Arquivado em Wordpress

O problema: Por padrão, o WordPress exibe somente links de página anterior e próxima página, nos arquivos que requer paginação. Isto é melhor do que nada, mas não entendemos por que o wordpress ainda não tem um sistema de paginação por padrão. Sim, existem plugins para isto, mas por que não incluirmos a páginação diretamente no nosso theme (layout)?

A solução:
Nós iremos utilizar o plugin WP-PageNavi e vamos inserir o código diretamente no nosso template. Após fazermos, não será mais necessário instalar o plugin toda vez que formos utilizar este template.

1. A primeira coisa a ser feita, obviamente, é fazer o download do plugin WP PageNavi.
2. Descompacte o arquivo do plugin no seu computador, e faça upload do arquivo wp-pagenavi.php e wp-pagenavi.css para a pasta do seu theme.
3. Abra o arquivo que você deseja que a paginação seja exibida (exemplo: index.php, categories.php, search.php, etc.), e econtre o seguinte código:

<div class="navigation">  
<div class="alignleft"><?php next_posts_link('Previous entries') ?></div>  
<div class="alignright"><?php previous_posts_link('Next entries') ?></div>  
</div>

4. Substitua este código pelo código abaixo:

<?php  
include('wp-pagenavi.php');  
if(function_exists('wp_pagenavi')) { wp_pagenavi(); }  
?>

5. Agora precisaremos modificar o arquivo do plugin. Para fazer isto, abra o arquivo wp-pagenavi.php e encontre a seguinte linha (linha #61):

function wp_pagenavi($before = '', $after = '') {  
global $wpdb, $wp_query;

Precisaremos adicionar a chamada a função pagenavi_init(), e então o código ficará assim:

function wp_pagenavi($before = '', $after = '') {
    global $wpdb, $wp_query;
        pagenavi_init(); //chamando a função pagenavi_init()

6. Estamos quase terminando. A última coisa a ser feita é adicionar o wp-pagenavi css ao seu blog. Para fazer isto, abra o arquivo header.php e adicione a seguinte linha:

<link rel="stylesheet" href="<?php echo TEMPLATEPATH.'/pagenavi.css';?>" type="text/css" media="screen" />

Explicação geral: Esta modificação consiste em simplesmente incluir o plugin diretamente no seu wordpress theme (layout). Com isto não será necessário instalar o plugin toda vez que for utilizar este theme. O funcionamento desta técnica consiste simplesmente em chamar a função pagenavi_init() diretamente do seu plugin, e deixar que o plugin, e deixar que a própria função faça o resto, e exiba a paginação da maneira que desejamos.

Seo para iniciantes

28 de dezembro de 2008 por Danival A. Souza  
Arquivado em Seo

Muito se houve falar de SEO e qual é sua importância para o sucesso de um site. Dificil é entender o mundo de termos novos ao se pesquisar sobre SEO, e é também complicado dar os primeiros passos.

Este artigo é inédito e voltado a iniciantes. O objetivo é responder algumas perguntas de iniciantes sobre SEO, e preparar para que possamos aprofundar mais no assunto em artigos posteriores.

Então, vamos lá!

O que é SEO?

Esta pergunta sempre é respondida dizendo: “SEO é um acrônimo para “Search Engine optimization” - Otimização para sites de busca. Mas não acredito que isto seja suficiente para dar uma resposta. SEO é a função de preparar um site, preferencialmente desde que for concebido, para que este possa ser agradável aos sites de busca. É importante dizer que estes sites também deverão ser agradáveis aos usuários finais, os internautas.

O que eu preciso saber para iniciar em SEO?

Tecnicamente, é importante conhecer HTML. Você precisa conhecer as principais tags, para que serve e como utilizar. Precisa também de boa vontade para aprender, é necessário ser apaixonado por internet, este é o requisito mais importante. Você precisará estudar, ler muito, mas não será cansativo. Será na verdade, muito prazeroso.

Ok, eu sei HTML e gosto de internet. Como otimizar meu site?

Existem dezenas, talvez centenas de tarefas para otimizar um site. Entretanto, algumas são mais fáceis e até mais importantes. Vou listar os caminhos para que um iniciante já consiga um bom trabalho sozinho, com seu próprio site.

1. Evite frames, iframes, flash, menu com imagens, sites feito só com tabelas
Faça um site usando os padrões. Separe o conteúdo da formatação, usando XHTML para o conteúdo e CSS para formatação. Use texto para os menus. Evite colocar conteúdo em Flash. Use as tags HTML de forma semântica. O que isto quer dizer? Quer dizer que você deverá usar <h1>para títulos, deverá usar <strong> para dar enfase, utilizará
<table>somente quando precisar utilizar dados tabulares.

2. Coloque suas palavras chaves mais importantes no título da página
Tempos atrás, praticamente todas as páginas de internet tinham como título o nome do site. Hoje, reconhecemos que o ideal é que o título da página seja exatamente isto: um título sobre o conteúdo daquela página. Além disto, utilize um título diferente para cada página do seu site, isto é muito importante. Evite repetir palavras chaves no título, e não utilize mais que 40 caracteres.

3. Use (sem abuso) a meta tag description
O seu título deve ser curto, até 40 caracteres. Na meta tag description, você deve inserir uma breve descrição sobre a página (novamente: cada página do site deverá ter uma description diferente). Aqui, você poderá usar algumas frases, mas sem repetir.

4. Use a tag H1
Dentro do corpo do seu documento, use a tag h1 para identicar o título da página que irá ser exibida. Pode (e deve) ser semelhante ao título informado na tag title. Preferencialmente, use somente uma tag h1 por página. Na sequência, você poderá usar a tag h2 para subtítulos, h3, h4, etc.

5. Use suas palavras chaves no conteúdo da página
Repita as palavras chaves que foram inseridas no título, na description e na tag h1, dentro do contéudo da página, no formato de um texto legível aos seus usuários.

6. Dê enfase a suas palavras chaves
Use a tag <strong> ou a tag <strong> nas suas palavras chaves. Não abuse deste recurso, apenas use nas palavras mais importantes, que tem maior peso para a página.

Como manter o rodapé no final da página

27 de dezembro de 2008 por Danival A. Souza  
Arquivado em Css, Web Design

Quando uma página HTML tem um conteúdo muito pequeno, o rodapé pode não chegar ao final da página, ficando no meio do caminho (muitas vezes no meio da página), deixando um espaço vazio até o final. A aparência do site fica horrível nestes casos, principalmente em monitores grandes com altas resoluções. Web Designers frequentemente perguntam em listas de discussões, qual é o caminho para colocar o rodapé fixo no final da página. Esta resposta não é tão obvia, mas nós iremos demostrar uma inteligente e elegante solução.

rodape

Quando paramos de usar tabelas e começamos a fazer os layouts usando CSS, tentamos colocar o rodapé no final da página, mas simplesmente não funcionava como esperavamos. Criamos várias maneiras de fazer isto, inumeras vezes usando gambiarras em javascript, outras usando técnicas de css hacks, mas nenhuma destas técnicas foram tão boas e eficientes quanto esta. Este método utiliza CSS 100% valido , e trabalha em qualquer navegador moderno. Também exibe o conteúdo de maneira inteligente em navegadores antigos, o que torna esta a solução segura para usar em qualquer website.

Veja o exemplo online: Veja a demonstração com o rodapé no final da página

Principais recursos

  • Trabalha em qualquer navegador moderdo

    Navegadores testados: Firefox (Mac & PC), Safari (Mac & PC), Internet Explorer 7, 6 & 5.5, Opera e Netscape 8

  • Compatível com navegadores antigos (gracefull degradation)

    Navegadores antigos irão colocar o rodapé exatamente abaixo do conteúdo. Nós não podemos fazer muito para pessoas que usam navegadores ultrapassados demais, o máximo que conseguimos fazer é possibilitar que consigam acessar o conteúdo.

  • O rodapé acompanha o texto em sites com conteúdo longos

    Em sites com bastante conteúdo, o rodapé ficará fora da área imediatamente visível da janela, assim como parte do conteúdo, uma vez que, obviamente, o rodapé estará abaixo deste conteúdo, fechando o site. Este é o comportamento normal e desejado.

  • CSS 100% válido. Sem uso de hacks

    O CSS utilizado é 100% válido e não contém hacks.

  • Sem JavaScript

    Não é necessário Javascript. Esta técnica usa puramente CSS.

  • Compatível com iPhone

    Esta técnica funciona perfeitamente no IPhone e IPod Touch.

  • Download Grátis

    Salve o código da nossa página de demonstração e utilize como você desejar.

Existe somente uma limitação

Você deve definir a altura do rodapé para algum valor diferente de auto. Escolha o valor que quiser, só é importante que este valor esteja especificado em pixerls ou ems dentro do seu CSS. Como visto, isto não é uma grande limitação, mas este método é essencial para que o recurso possa trabalhar corretamente.

Se você tem bastante texto no seu rodapé, então é uma boa ideia definir um pouco mais de tamanho para fazer o seu rodapé maior que o texto. Iso é importante pois algumas pessoas usam o texto um pouco maior que o padrão dos navegadores. Outra maneira de resolver este problema, é definir a altura do rodapé em polegadas (em), isto irá garantir que o rodapé cresça juntamente com o texto. Se você somente tem imagens no rodapé, então não é algo que precise se preocupar. Apenas informe o valor para o seu rodapé para um valor definido em pixel, e irá funcionar perfeitamente.

Como funciona?

Não é nada complicado. Vamos separar em duas partes. O HTML e o CSS.

O HTML

<div id="container">
   <div id="header"></div>
   <div id="body"></div>
   <div id="footer"></div>
</div>

Precisamos de somente quatro divs para este trabalho. A primeira é a div container, que engloba todo o restante. Dentro dela, teremos três divs: o cabeçalho, o body (corpo - conteúdo central do site), e o rodapé. Isto é tudo no HTML. A mágica acontece no CSS.

O CSS

html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#cabecalho {
   background:#ff0;
   padding:10px;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* altura do rodape */
}
#rodape{
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* altura do rodape */
   background:#6cf;
}

E mais uma regra CSS simples, para o IE 6 5.5:

#container {
   height:100%;
}

As tags html e body

As tags html e body devem ser definidas para height:100%; isto irá permitir que definirmos um percentual para a altura na nossa div container, posteriomente. Também removi a margin e o padding da tag body, para que não fique espaços ao redor da página.

A div container

A div container tem um min-height:100%; com isto, definimos que a altura tenha pelo menos toda a tela, mesmo que quase não tenha nenhum conteúdo. Muitos navegadores antigos não suportam a propriedade min-height, então poderiamos usar técnicas com javascript e outros métodos, mas não vamos discutir isto neste artigo. A div container é setada para position:relavite, para permitir que setamos elementos com posicionamento dentro dela.

A div cabecalho

Não tem nada especial aqui. Faça esta div com cores e tamanhos que você desejar.

A div body

A div body é quase normal também. A única coisa importante é que devemos ter um bottom padding que é igual (ou ligeiramente maior) que a altura do rodapé. Você pode também usar um bottom border se você preferir, porém usar margin não irá funcionar.

A div rodapé

O rodapé tem sua altura setada em pixels (ou ems). A div é posicionada com bottom:0;para movê-la para o final da div container. Quando existir pouco conteúdo na página, o container div irá ter exatamente a altura da area de visão do navegador (por isto usamos min-height:100%;) e o rodapé irá grudar no final da janela. Quando o conteúdo for maior que a área de visão do navegador, o rodapé então ficará abaixo do conteúdo. Também definimos a largura do rodapé com width:100%; para que o rodapé utilize toda a largura da nossa div container.

O CSS para IE 6 e 5.5

As versões antigas do Internet Explorer não entendem a propriedade min-height, mas para nossa sorte o comportamento padrão da propriedade height destes navegadores, exibe exatamente o resultado que desejamos. Simplesmente usamos uma regra condicional para o IE no CSS. Veja o código da demonstração para verificar como ficará.

Neste artigo apresentamos um caminho simples e eficiente de ter o rodapé do seu site no final da área visível do navegador, quando o conteúdo for pequeno. Este artigo é uma adaptação livre do original em inglês, criado por Mattew James Taylor, que pode ser visualizado em: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

Top 5 fatores negativos para o google

27 de dezembro de 2008 por Danival A. Souza  
Arquivado em Seo

Abaixo segue uma lista dos 5 motivos principais para ser negativado na busca do google, e sua pontuação numa escala de 1 a 5.

1. Servidor frequentemente inacessível para os bots
Nota: 3.8

Se o seu site ficar mais do que 48horas fora do ar, provavelmente você será cairá drásticamente na busca do google (podendo até sumir temporariamente). Se o próprio google bot não consegue acessar o seu site, é de se esperar que os internautas também não poderão acessá-lo. Para quê o google irá listar um site que não é possível acessar?

2. Conteúdo duplicado ou muito semelhante no diretório do google
Nota: 3.6

Basta uma única cópia de cada documento para servir ao internauta. Num mundo ideal, o resultado da busca te daria opções de documentos diferentes sobre um mesmo tema.

3. Links para sites de baixa qualidade/ e link para sites de spam
Nota: 3.6

Links são recomendações. É quase como uma carta de indicação. É importante então estar de olho em quem você está indicando.  Black hat seo usa frequentemente compra de links, e fazem spam em sites para obter links.

4. Participar de esquemas de troca de links ou compra de links
Nota: 3.3

Você pode linkar alguém que te linka. Isto não é errado. Desde que feito de forma natural. Você também precisa linkar sem ser linkado, e receber links de maneira voluntária. Isto identifica a autenticidade de um site. E é possível conseguir isto, apresentando conteúdo de qualidade.

5.  Títulos e meta tags duplicadas em muitas páginas
Nota: 3.3

Ter o mesmo título e meta tags em todo o site não o fará ser penalizado. O que acontece aqui, é que o site não estará otimizado da maneira que poderia. Neste caso, não é o google que está penalizando o seu site. É o seu próprio site que não está conseguindo passar para o google o necessário para ser melhor rankeado nas buscas.

Próxima »