Isso mesmo! Não é porque você já usa o melhor navegador que ele não possa ficar ainda melhor!

Se você já está enjoado de ver sempre o mesmo visual no seu Firefox, vamos ver agora vários modelos de temas para mudar a cara do seu navegador.

1. RedShift V3 3.0

Um visual sombrio para o seu Firefox. Se você está cansado de ver tudo clarinho, faça o caminho inverso. RedShift é um tema sombrio, escuro e perfeito para quem gosta de um estilo mais dark.

2. Firefox Vista 2.0

Que tal o Mozilla Firefox com a cara do Windows Vista? Confira!

3. Gradient iBlu 1.0.8

Um tema no mínimo diferente de tudo o que você já viu em matéria de aparência do Firefox. Moderno, ousado e garanto que vai te confundir um pouco no começo, mas é bem interessante.

4. Nasa Night Launch

Simplesmente lindo! Um tema suave, escuro e que combina perfeitamente com o Firefox. Na minha opinião, simplesmente o mais lindo dos temas já criados!

5. LumiNight 1.0

Um competidor direto a beleza do Nasa. Olha, difícil escolher entre os dois. Eu escolhi o Nasa, mas tenho que indicar o LumiNight que é muito bonito também. Vale conferir.

6. HalloFF

Um tema especial para o Halloween (dia das bruxas). Nada muito assustador, pelo contrário, é até bem divertido.

Presente de Natal

Acima estão os 6 mais belos temas para o Firefox (claro, isso na minha opinião e cada um tem a sua). Agora vamos ao presente de Natal.

Tudo bem, eu sei que ainda falta um tempinho, mas que tal já ter salvo em seu computador um tema para essa data? (vai que some das prateleiras né? hehehehe)

Winter Holiday Christmas Theme and Toolbar

Faça bom uso!

Veja bem, eu disse “gratuitos”. Eu sei que você, leitor, que também é desenvolvedor profissional ou qualquer coisa do tipo vai vir correndo defender o Dreamweaver.

Não se preocupe e não precisa gastar seus dedos digitando. Eu também acho que o Dreamweaver é o melhor, mas é pago, então…

A ideia aqui é trazer o que há de melhor em matéria de programas gratuitos e nesse caso, não tem programa melhor e mais fácil de se aprender a usar que o DFM2HTML.

O DFM2HTML funciona na base do drag & drop, ou seja, na base do arrastar e soltar, sem mistérios.

Tudo está ao alcance de um clique e os menus e opções de tela são bem simples de serem entendidos, mas no entanto, sabendo o que fazer é possível criar muita coisa com o programa.

Só para te dar uma ideia, eu uso o DFM2HTML tanto para criação de sites institucionais, quanto para criação de layouts para blogs.

Isso mesmo, layouts para blogs! E é bem mais simples que parece!

Tudo o que eu faço é desenhar o layout no DFM2HTML, depois copiar e salvar as imagens, bastando depois ajustá-las no template do blog. Tanto faz, se Blogger ou WordPress.

Como webdesigner posso dizer que cerca de 80% dos projetos que faço, mesmo que tenham que ser programados em um editor, nascem no DFM2HTML.

Vantagens

Além do óbvio, ou seja, o fato de não ser necessário nenhum conhecimento técnico para começar a usar o DFM2HTML, existem inúmeras vantagens que fazem desse programa o melhor programa gratuito de criação de websites.

E se você já conhece um pouco de HTML, JavaScript e PHP poderá criar de pequenos sites institucionais a grandes portais de notícias (o céu é o limite).

Compatibilidade

Como eu disse, se você tem algum conhecimento de HTML, JavaScript e PHP o céu é o limite, uma vez que o DFM2HTML é completamente compatível com PHP e te possibilita inserir códigos em JavaScript e fazer qualquer alteração no código HTML gerado.

Dicas e Truques

Para quem está começando a usar o programa, aqui vão algumas dicas e truques para ajudar:

• Teclas de atalho
  Esc: Seleciona o pai do objeto
  CTRL + Seta: Move o objeto selecionado um pixel
  CTRL + SHIFT + Seta: Move o objeto selecionado pela largura da grade
  SHIFT + Seta: Redimensiona o objeto selecionado um pixel
  ALT + botão esquerdo do mouse sobre o conteúdo textual: Abre o editor de texto com o cursor de edição para definir a posição do texto clicado.

• Linguagem
  A partir da versão (3.4) do programa já foi incorporado o Português do Brasil, portanto, nem a barreira do inglês para quem não fala não é mais problema. Na data de hoje o programa está na sua versão 3.5 onde já foram incorporadas outras novidades, como a opção para o Espanhol como língua base, além da adição de menus.

• Instalação
  Vá até a página inicial do programa e na parte de baixo da tela você vai ver o link para o download do DFM2HTML. Basta clicar e baixar. Não precisa descompactar nada, pois o site já disponibiliza um executável. Após baixar o programa, clique duas vezes no ícone e instale normalmente.

Quanto a linguagem, não precisa se preocupar, pois na instalação ele já é instalado na sua língua.

Mas se você quiser trocar (eu acho que usá-lo em inglês é mais interessante para quem está querendo começar a desenvolver projetos, uma vez que 99% dos programas usados são em inglês), basta ir até o menu superior e clicar em Ferramentas e em Linguagem escolher a que desejar (no caso o inglês, mas você pode optar por Alemão, Italiano, Espanhol e até Eslovaco).

Enfim, o DFM2HTML é um programa simples, porém completo. Diria sem frescuras. Funciona perfeitamente e cumpre o que promete!

Se o seu negócio é começar no ramo de criação web, esse é o seu programa.

Imagem: Kymberly Vohsen

Para quem começa no WordPress escolher um template é bem fácil, já que as opções de qualidade são muitas, pois são inúmeros os profissionais que se dedicam a criar templates para o WP.

O grande problema acontece mesmo é para quem começa a blogar com o Blogger.

Encontrar templates de qualidade para o Blogger é uma missão das mais difíceis, por isso quando encontramos um site que resolve procurar e expor os melhores templates da web, temos mais é que divulgar!

Por isso, resolvi fazer uma seleção com os 5 melhores templates dentro do site BTemplates que também já tem uma seleção dos melhores. Vamos ver!

Lembrando que o BTemplates mostra templates encontrados pela web e que lista em suas páginas individuais os autores do template e que além disso não retira nenhum crédito, ou seja, não são feitas alterações nos códigos, ok?

Fora isso, todos os temas vem com um arquivo explicando como proceder com a instalação (em inglês, uma vez que o site é em inglês).

1. My World

O My World é um template simples de duas colunas, largura fixa, cinza verde, lateral direita, cantos arredondados, especial para blogs que falam de Web 2.0 e assuntos afins.

2. Gallery

O Gallery é um template de 3 colunas e foi especialmente desenvolvido para quem precisa de um portfólio de imagens. Seja para fotógrafos, designers e afins, o Gallery é o template ideal para quem trabalha com imagens.

3. BloggerTube

O BloggerTube é um template feito pensando em um site/blog de vídeos. Como o próprio nome diz: Blogger – Tube, ou seja, um blog no blogger para vídeos do YouTube.

A instalação é um pouco complicada para quem não tem nenhuma experiência, mas se você já sabe hospedar scripts e quer montar um blog de vídeos, esse é o seu template.

4. Pro Black

O Pro Black é um template de 2 colunas, mas de uma elegância tamanha que não poderia faltar nessa lista.

Se você está procurando por um template moderno e que encha os olhos, esse é o seu.

5. Magasin Tres

O Magasin Tres é uma adaptação do wordpress em formato de um tema Magasine para Blogger. Um dos poucos que realmente funciona.

São três colunas, fundo azul, post do lado esquerdo com fundo branco. Lindo!

É isso, aí estão 5 templates de primeira para o Blogger.

Os 5 melhores temas, ao menos, na minha opinião. É claro que essa é uma escolha minha e você pode e deve ir até o BTemplates para vasculhar e encontrar o template que mais lhe agrade.

Apenas fiz uma seleção de templates para dos mais variados temas para te dar um exemplo.

Faça bom uso!

Imagem: Arcobal

Na maioria das vezes não temos tempo, disposição ou até talento para trabalhar uma imagem, mas precisamos. Seja para um perfil, um avatar, um artigo, não importa.

Já que é necessário, então porque não fazer isso on-line e ganhar tempo e ao mesmo tempo manter seu computador leve? Sim leve, já que não é necessário instalar nada.

Se esse é o seu problema, era, não é mais!

Vamos ver agora uma lista com os 6 melhores serviços para edição de imagens on-line que vai acabar com todas as suas desculpas com relação a esse assunto. Agora, só não edita imagens quem não quiser.

1. FotoFlexer

O FotoFlexer é um serviço poderoso e que conta com a maioria das ferramentas e filtros para edição que os concorrentes gratuitos que precisam de instalação. Com a diferença de que tudo é feito on-line. Rápido e relativamente fácil de usar, uma das ferramentas mais completas para quem precisa editar imagens on-line.

2. Free Photo Editor Online

O Free Photo Editor Online te ajuda a melhor definir imagens faciais trabalhando as fotos em formato jpeg ou gif, com comandos simples e objetivos, mas sem deixar de serem completos. Uma excelente ferramenta, principalmente se formos levar em conta que é totalmente gratuita.

3. myImager

O myImager é um serviço de edição de imagens totalmente on-line e muito prático. Tudo o que você precisa fazer é escolher uma imagem do seu computador e brincar com ela como quiser, uma vez que esse serviço oferece uma variedade imensa de filtros e efeitos para modificar a imagem escolhida.

4. Quick Thumbnail

O Quick Thumbnail é um serviço simples, porém muito eficiente para quem precisa redimensionar rapidamente uma imagem. Pois é! O Quick Thumbnail é isso, um redimensionador de imagens on-line. Simples assim! E é simples mesmo. Bastam alguns segundos para redimensionar imagens do seu computador ou on-line, desde que você forneça a url da mesma. Ótimo!

5. mypctr

O mypctr é um serviço que lhe permite criar um avatar a partir de qualquer imagem que você escolha em seu computador. Um serviço totalmente on-line, gratuito e de qualidade. Tudo o que você precisa fazer é escolher uma imagem em seu computador e editá-la da forma que desejar. Depois disso, você tem um tempo para fazer o download da imagem criada para o seu computador, após algum tempo, o mypictr irá eliminar a imagem. Ou seja, sua imagem fica para você fazer o download e depois é descartada. Não ocupa espaço e não fica disponível para mais ninguém.

6. Online Photo Tool

O Online Photo Tool é um serviço simples, porém muito eficiente. Além da edição da imagem propriamente dita, ainda é permitida a hospedagem e utilização de imagens, tanto do seu computador, quanto de imagens on-line. Com filtros e ferramentas básicas, o Online Photo Tool é uma boa pedida para quem deseja velocidade e praticidade, mas que não dispensa a boa qualidade.

Aí estão, 6 serviços fantásticos e que deveriam constar dos favoritos, não só dos blogueiros de plantão, mas de todos que gostam e/ou precisam editar imagens e não querem mais depender de um ou outro programa instalado em seu computador.

Faça bom uso!

Imagem: stock.xchng

Personalizar o blog e mostrar ao visitante quem é você, o que você faz e, principalmente, deixar com que as pessoas saibam que quem está ali é um ser humano, acessível, é bom e dá credibilidade.

Uma das formas de fazer isso é “dar sua cara para bater”, ou seja, mostrar seu rosto, deixar com que as pessoas saibam não só quem é você, mas o que você faz.

E uma boa ferramenta para isso é mostrar o seu perfil ao final de cada post!

O grande problema é: Como fazer?

Não mais, vamos aprender agora!

A maneira mais simples de se fazer isso é usar as informações que você já tem no seu perfil do autor no Dashboard.

E para fazer isso, tudo o que vamos precisar é incluir um pequeno código na página single.php que é a responsável pelos posts individuais do blog (quando a página está aberta aparecendo os comentários).

Na página single.php vamos encontrar a função the_content() e inserir o seguinte trecho de código logo após ela:

<!– INICIO PERFIL –>
<div id=”perfildoautor”>
<?php echo get_avatar (get_the_author_id() , 80 ); ?>
<a href = “<?php the_author_url(); ?>”>
<?php the_author_firstname(); ?> <?php the_author_lastname(); ?></a> – <?php the_author_description(); ?><br />
<span><a href=”mailto:<?php the_author_email(); ?>” title=”Enviar e-mail”>Enviar e-mail</span></p>
</div>
<!– FIM PERFIL –>

Vamos entender:

O <div id=”perfildoautor”> é a chave que vamos usar para aplicar os estilos depois.

O <?php echo get_avatar (get_the_author_id() , 80 ); ?> puxa a imagem do avatar usado pelo autor (se você ainda não tem um um clique aqui e faça o seu) com 80 pixels de altura e largura.

O <?php the_author_url(); ?> puxa a url (endereço) da página do autor especificada no seu perfil e cria o link para ela.

O  <?php the_author_firstname(); ?> puxa o primeiro nome do autor e o <?php the_author_lastname(); ?> puxa o sobrenome do autor.

O <?php the_author_description(); ?> puxa a descrição do autor.

O <?php the_author_description(); ?> puxa o e-mail do autor.

O <?php the_author_email(); ?> puxa o -mail do autor (no caso está ligado ao mailto: para abrir o assistente de e-mail do leitor).

Agora vamos cuidar dos estilos!

Para acrescentar estilos ao código, vá até a página style.css e acrescente ao final dela:

#perfildoautor {
height: 80px;
padding: 10px;
margin: 10px 0;
background: #cccccc;
border: 1px solid #000000;
}

#perfildoautor h4 {
margin: 0 0 10px 0;
font-size: 1.2em;
}

#perfildoautor img {
margin: 0 15px 10px 0;
float: left;
border: 1px solid #000000;
}

Agora vamos entender os estilos que acabamos de aplicar:

No primeiro estilo #perfildoautor (área do perfil completa)

O height: 80px; controla a altura da área de perfil, você pode e deve alterar o número para mais ou para menos até chegar na altura desejada.

O   padding: 10px; controla o espaço interno da área do perfil.

O margin: 10px 0; controla a margem entre a borda da área de perfil e o seu conteúdo.

O background: #cccccc; controla a cor de fundo da área de perfil.

O border: 1px solid #000000; exibe uma borda ao redor da área de perfil.

No segundo estilo #perfildoautor h4 (Nome e link do autor)

O margin: 0 0 10px 0; controla a margem entre o título e o restante do conteúdo.

O font-size: 1.2em; controla o tamanho da fonte.

No terceiro estilo #perfildoautor img (Imagem do autor)

O margin: 0 15px 10px 0; controla a margem entre a imagem e o restante do conteúdo.

O float: left; controla onde a imagem vai aparecer.

O border: 1px solid #000000; exibe uma borda ao redor da imagem.

*Criei esse código como está e os estilos, depois testei localmente. Mesmo assim, qualquer dúvida deixe nos comentários!

Ah! Já ia me esquecendo! Esse é o resultado final do perfil como está aí no nosso código (é uma imagem claro, só para ilustrar):

Até o próximo tutorial!

Imagem: stock.xchng

Tudo bem, se você não sabe o que é um banner, um pouco de história:

O primeiro anúncio clicável de que se tem notícia foi vendido pela Rede Global Navigator (GNN) em 1993 para uma firma de advocacia. Isso antes do anúncio clicável ser chamado de banner!

Já a HotWired foi o primeiro site a vender banner em grandes quantidades e foi quem cunhou o termo Banner. Além de ter sido a primeira empresa a fornecer relatórios sobre a taxa de cliques de seus clientes.

Entendido um pouco da história, eu te pergunto: você sabia que existem tamanhos oficiais de banners?

Pois existem!

Se você parar para pensar vai ver que sempre vê os mesmos tamanhos de banners em vários sites e se participa de programas de afiliados também já deve ter percebido que os tamanhos se repetem certo?

Pois bem, isso não é por nada. Existe um padrão!

Segundo o que eu pude apurar como fato, a Interactive Advertising Bureau (IAB), que é uma organização empresarial americana, recomenda nove tamanhos específicos para sites:

• 88×31
• 120×60
• 120×90
• 125×125
• 120×240
• 234×60
• 392×72
• 460×55
• 468×60

Além desses tamanhos, posso adicionar a essa lista por minha conta o 728×90 que é muito usado, além dos arranha-céus implementados logo de cara por quem usa o adsense 160×600.

Então chegamos a um total de 11 tamanhos diferentes (lembrando que as medidas são relativas a pixels). E temos os tamanhos mais usados pelo mundo. Seja pelas agências, pelos programas de afiliados ou por qualquer outro serviço.

Tudo bom, tudo bem, mas aí você me pergunta: Se existem mesmo tamanhos oficiais, porque eu já vários banners de outros tamanhos que não esses apresentados aqui?

E eu te respondo: Cada um sabe de si!

A ideia de levantar essa história dos tamanhos oficiais de banners foi muito mais para fazer todo mundo pensar que qualquer outra coisa.

Agora, o blog/site é seu e você faz nele o que quiser.

Porém, pense um pouco: se você apresenta tamanhos de banners fora dos padrões aceitos, você não só dificulta a vida de quem quer indicar o seu blog/site por meio de divulgá-lo (o tamanho 120×60 ou até o 468×60 são sem dúvida os mais utilizados para isso) ou você se prejudica no caso de vender espaço para publicidade.

De resto, como eu disse, o blog/site é seu e você faz nele o que quiser, mas lembre-se: as pessoas estão acostumadas com o padrão e em alguns casos, tentar ser diferente pode ser o mesmo que não ser profissional.

Pense nisso antes de criar um banner nas medidas 143×339!

“Favicon é uma palavra derivada de favorite (favorito) e icon (ícone). Uma imagem no formato .ico (ponto ico) com cerca de 16×16 pixels que ficam guardados em um site para visualização pelo navegador” (informação: Wikipédia )

No popular, favicon é aquela imagem que você vê ao lado do título da página na aba do navegador ou ao lado do endereço na barra de endereços.

E para que serve isso?

O favicon geralmente é associado ao logotipo do site, quer dizer, ele ajuda a compor a identidade visual do site. Você pode até não se tocar, mas existem marcas pela web que você reconhece pelo favicon e nem percebe. Por exemplo:

E como criar um favicon?

Antes de mais nada, você vai precisar de uma imagem para usar como seu favicon. Assim como vimos nos exemplos acima, procure usar uma imagem que tenha a ver com o seu site, com o seu logotipo, cores, etc. Tudo para ajudar a criar a identidade do seu site.

Em seguida, você pode tanto usar um programa de edição de imagens para criar uma imagem com extensão .icon como um serviço on-line. No meu caso, uso e recomendo o Favicon fron Pics

Para usar, basta acessar o site e clicar em Enviar arquivo… escolhendo a imagem que você deseja transformar em favicon no seu computador e em seguida em Generate Favicon.ico. Como visto na tela abaixo:

Importante: a imagem deve ter 32×32 pixels para que o site Favicon from Pics transforme-a em um favicon de 16×16 que é o tamanho correto de um favicon ok?

Depois de clicar em Generate Favicon.ico você irá para a próxima página onde você deve clicar em Download Favicon Package para baixar o favicon criado para o seu computador.

Ao baixar o favicon que você acabou de criar, você vai receber uma pasta compactada. Ao descompactar essa pasta você vai perceber que foram criados dois ícones além da imagem que você mandou. Um é um favicon normal e outro um favicon “animado” que é a sua imagem em movimento. Aí cabe a você escolher qual pretende usar.

Escolha a sua imagem e hospede-a em um serviço de hospedagem de sua confiança. Pode ser gratuito ou não, você quem sabe. Só não dá para usar a hospedagem do Blogger para isso, pois ela não aceita arquivos com a extensão .ico.

Como implementar o favicon no meu blog?

Depois de converter a imagem e hospedá-la, você vai precisar adicionar um pequeno trecho de código ao código do seu blog, o qual será responsável por “chamar” essa imagem quando a página for carregada. Ou seja, vai fazer a imagem aparecer onde deve!

Em WordPress:

Na área de edição do seu blog, procure pela página header.php do seu tema e encontre a tag </head>.

Essa tag é responsável por fechar o seu cabeçalho e o código para chamar o favicon deve ser inserido ANTES dela. Eis o código:

<link rel=”shortcut icon” href=”ENDEREÇODAIMAGEM” type=”image/x-icon” />

Basta substituir onde está escrito ENDEREÇODAIMAGEM pela url de onde você hospedou a imagem.

No Blogger:

No caso do blogger, algumas pessoas não conseguem adicionar um favicon porque não sabem, mas é preciso além da imagem .ico uma imagem em jpg ou png para que o favicon apareça corretamente (coisas do blogger). Para tanto, além da imagem .ico que você já hospedou, você vai precisar de uma outra imagem igual só que normal, .jpg (ponto jpg) ou .png (ponto png) que pode ser criada no seu computador até no paint e hospedada em qualquer lugar, inclusive no próprio Blogger.

Depois de hospedar as imagens, vá até a parte de edição de html do blogger, e procure pelo trecho <b:skin><![CDATA[/* (está logo no começo do código) e cole o código a seguir ANTES desse trecho:

<!– favicon –>

<link href=’ENDEREÇODAIMAGEMPONTOICO’ rel=’shortcut icon’ type=’image/x-icon’/>

<link href=’ENDEREÇODAIMAGEMPONTOJPG’ rel=’shortcut icon’ type=’image/x-icon’/>

<!– end favicon –>

Faça as substituições indicadas no código pelos endereços das respectivas imagens e pronto!

Importante: Cuidado ao fazer as substituições nos códigos para não apagar nenhuma aspa, caso contrário o código não irá funcionar.

Faça bom uso e até o próximo tutorial!

Antes de qualquer coisa, vamos entender:

WordPress.com – É um serviço gratuito no estilo do blogger/blogspot. Ao criar um blog, o nome do seu blog fica assim: nomedoseublog.wordpress.com. É um serviço bem interessante, mas um pouco limitado. Além do fato de (até a data de publicação desse artigo) não ser possível incluir anúncios no seu blog.

WordPress.org – Não confundir com o anterior. O wordpress.org é um programa que utiliza a linguagem PHP, programa esse que você baixa gratuitamente e instala em um host de um serviço de hospedagem (de preferência pago) que contenha php e mysql no contrato. Aí, como dizia meu avô “são outros 500″. Com o wordpress.org instalado você pode fazer o que quiser, desde editar o tema até colocar qualquer tipo de anúncio, inclusive AdSense.

Agora, independente se você trabalha com webdesign ou programação, chegará o momento em que você vai precisar ter o WordPress (.org) instalado no seu computador.

Por isso, esse artigo vem tentar ensinar como fazer a instalação do WordPress no próprio computador, o que é bom não só para quem está começando, pois dá a oportunidade de se familiarizar e aprender a usar a interface do administrador e ao mesmo tempo, lhe dá a segurança necessária para fazer alterações no código do seu template sem o risco de prejudicar seu blog, uma vez que ele estará apenas no seu computador.

Para realizar a instalação do WordPress em nosso computador tudo o que precisamos é de um servidor web (Apache) rodando PHP e mySQL. Calma! Parece muita coisa, mas não é!

Existe na internet vários pacotes que fazem toda a instalação necessária. Tudo o que você precisa é escolher o seu e começar a trabalhar.

Para facilitar, escolhi para esse tuturial o EasyPHP, pois para mim é o mais fácil de todos os que já testei até hoje e é perfeito para rodar o WordPress localmente. Se você deseja algo mais poderoso, posso indicar o Xampp que é bem parecido com o EasyPHP, porém um pouco mais “redondo” abrindo espaço para outros trabalhos com PHP e banco de dados, mas necessita de um conhecimento um pouco maior de programação para ser utilizado com tudo o que precisa.

Como o nosso objetivo aqui é facilitar a vida de todo mundo e explicar como instalar o WordPress localmente, vamos ficar com o mais simples (EasyPHP).

Para começar, faço o download do EasyPHP clicando no link abaixo e instale no seu computador:

EasyPHP

Agora, encontre o download da última versão do WordPress clicando no link abaixo e no lado direito da página que se abre:

WordPress

Lembrando que esse tutorial foi realizado com o Windows XP como sistema operacional. Não acredito que exista muita diferença para outros sistemas, mas… que fique registrado.

Ok! Com o EasyPHP instalado em sua máquina, assim que você inicia o programa, você verá uma janela assim:

É muito importante que as luzes que você vê acima estejam verdes, pois isso indica que o Apache e o MySQL estão funcionando. Caso não estejam verdes, clique no botão do aplicativo que não está funcionando e em iniciar. Se não funcionar, tente fechar e reiniciar o EasyPHP, se ainda não funcionarem não tem jeito, desinstale e instale novamente o EasyPHP e se o problema persistir, tente outro pacote do tipo, como o Xampp relacionado acima (ninguém está livre de uma incompatibilidade).

Uma vez funcionando o EasyPHP, abra seu navegador (browser), digite http://localhost/home/mysql e tecle Enter para abrir o phpMyadmin, que é o painel de controle do PHP.

Se você tiver qualquer problema para abrir o phpMyadmin, basta dar dois cliques no ícone do EasyPHP próximo do relógio (é uma letra E em preto e vermelho).

Agora, pegue a versão do WordPress que você baixou e já descompactou né? Não? Então faça isso!

Recorte e cole a pasta WordPress na pasta raiz do servidor instalado no seu computador (c:/arquivos de programas/easyphp/www ).

Você pode acessar o servidor através do navegador, basta digitar localhost e pressionar a tecla Enter. Você verá uma tela assim:

Agora vamos criar um banco de dados para o WordPress!

Primeiro, digite em seu navegador http://localhost/home/mysql e você verá um formulário que irá aparecer escolha um nome para o seu banco de dados (anote isso) e clique em criar novo banco de dados. Para o nosso exemplo, vamos chamar o banco de dados de wordpress e clicar em criar.

Agora, na barra de endereços do seu navegador, digite http://localhost/wordpress e na próxima tela clique em Create a configuration file e na tela seguinte clique em Let’s Go e você verá uma tela assim (preencha como na figura abaixo):

Clique em Submit e em Run the Install. Adicione em Blog Title o nome que você deseja para o seu blog e em Your E-mail adicione um endereço de e-mail válido (lembre-se que o WordPress utilizará esse e-mail para enviar sua senha que é criada aleatoriamente no próximo passo).

Clique em Install WordPress e você verá uma tela com o usuário e a senha aleatória criada. Copie e guarde a senha e clique em Log in. Digite o usuário como Admin e a senha que você copiou e comece a utilizar o seu blog!

Dicas – Se você instalou o EasyPHP sem mudar nada, os endereços para acesso são:

Blog: http://localhost/wordpress

Log in: http://localhost/wordpress/wp-login.php

Enviar arquivos para o servidor: c:/arquivos de programas/easyphp/www

Uma boa ideia é acessar o menu Users e em Authors & Users clicar em Admin e alterar a senha que foi criada para a sua instalação. Uma vez que é uma instalação local, não faz sentido ter uma senha muito complicada. Mude para 1234 por exemplo…

É isso! muito mais simples que parece, basta ter cuidado e atenção.

Faça bom uso!

Decidi migrar para o WordPress com um dos meus sites e há uma semana estou em busca de templates para WordPress acessíveis e otimizados para os motores de busca, além de claros e agradáveis.

A pesquisa de bons templates é difícil visto a enorme quantidade de layouts disponíveis, por isso resolvi selecionar e compartilhar os melhores sites que oferecem templates para todas as exigências: profissionais, amadores, gratuitos e pagos.

Freshy 2 Theme

Um template gratuito, mas de alto nível, desenvolvido por Julien De Luca. O plugin Customize permite um nível de personalização através do painel de controle quase sem limites. Eis as características principais:

• compatível com WP 2.6 (diferentemente da versão anterior)
• 17 línguas configuradas automaticamente através do user agent do visitante
• muitos sub temas
• compatível com gravatar
• largura fixa ou fluída
• compatibilidade com XHTML
• open source

E muito mais.

É aconselhado porque o alto nível de personalização lhe permite torná-lo único em relação aos outros blogs que o adotam.

DiploD

Davide Del Monte é o autor do velho layout do blog italiano Geekissimo e desenvolve templates para WordPress e Joomla lançando-os gratuitamente com licença Creative Commons.

Entre outros indico:

• Nerino 2.0

Template para WP agradável e profissional. Widget ready, já pronto para Adsense, compatível com gravatar e altamente personalizável.

• Gekissimo

A base do velho template desse site popular na Itália, disponível para download.

• Web TV

Se você tem um site de TV via internet ou web TV dê uma olhada neste ótimo layout já pronto.

Aconselhado porque é finalmente um produto italiano a altura da concorrência global.

TemplatePanic

Arquivo de layouts de vários tipos. Se você tiver paciência de percorrer todas as páginas poderá encontrar ótimos templates, tanto minimalistas quanto mais extravagantes e alegres. Entre estes indico o iPhone Blog Theme. Eis as principais características:

• XHTML e CSS compatíveis
• Widget ready
• Gestão de artigos correlacionados automática

Aconselhado para blogs geek que falam sobre gadgets.

Web 2.0 Themes

São 6 templates para WordPress dos quais 5 grátis e um pago. Têm um estilo rigorosamente Web 2.0. Eis os melhores dos três:

• Magazine theme (US$100)
• Sodelicious 2 (free e ótimo)
• Socute (free)

Você pode visualizar e baixar os outros daqui.

Aconselhado para quem quer um blog no estilo Web 2.0.

Woo Themes

Se você procura um tema WordPress para um blog focado em conteúdos e artigos este é o lugar certo.

Foi aqui que escolhi o layout que logo testarei com o Ikaro Brasil. São aproximadamente 15 e todos pagos, a licença monousuário custa US$70. A qualidade dos templates é excelente, ideal para tentar dar um salto de qualidade com um blog de conteúdo já relevante.

Indico algumas coisas legais para a personalização dos templates:

• gestão de banners 125×125 integrada
• integração e arquivo de vídeos graças a Tubepress
• gestão de artigos em evidência
• integração do Feedburner e assinatura do feed via email automatizada
• gestão do Google Analytics integrada

Estes são os dois templates do Woothemes que prefiro: The Gazzette Edition, Fresh News Theme.

Aconselhado para dar o devido destaque a conteúdos relevantes.

Top WP Themes

130 templates gratuitos para WordPress, entre os de sempre você consegue achar alguns de ótima qualidade. Ideal se você ainda não tem uma idéia clara de como quer deixar a gráfica do seu blog: aqui você encontrará muitas propostas que vão do minimalismo mais básico até o super colorido 2.0 mais extremo.

Ótimo sistema de navegação: é possível filtrar os templates baseado nas características desejadas como número de colunas, gestão widget, largura fixa ou fluída, etc… (o template da figura é Zinmag Redux)

Aconselhado para quem ainda não sabe se prefere um blog minimalista ou psicodélico.

Revolution WordPress Theme

Templates profissionais pagos, ideais para revistas, jornais online ou simplesmente para blogs ricos de conteúdo. São 10 temas ao todo, compatíveis com a versão 2.6 do WordPress. A licença para somente um site custa em média US$80.

Divirtam-se e não se esqueçam que a versão 2.6.X doWordPress pode causar alguns problemas com o alinhamento das imagens em alguns templates desenvolvidos para as versões anteriores. Eis como resolvê-los.

Eis um ótimo guia de Reinhold Weber para desenvolver folhas de estilo (Cascading Style Sheets, ou simplesmente CSS) de uma forma correta e otimal. O encontrei navegando com StumbleUpon, o traduzi e o repropus.

Photo Credit: urbanangel

O que evitar

• In-line CSS (especificar os estilos diretamente nas tags do texto)
• Dimensões absolutas dos caracteres
• Utilizar ápices únicos nos path das imagens
• Redeclarar valores já herdados
• Aplicar margens de células ou bordas a elementos de dimensões absolutas
• Posicionar elementos com coordenadas absolutas
• Denominar estilos e classes baseado em suas aparências

Recomendações a seguir

• Declarações do estilo CSS em uma única linha
• Comente o código
• Organize o arquivo CSS
• Indentifique a fonte, se necessário
• Simplifique a leitura do código
• Utilize um sistema comum de nomes para classes e estilos
• Elenque os estilos em ordem alfabética
• O ponto e vírgula “;” não é necessário para a última declaração
• Não é necessário declarar grandezas (px/em/%) iguais a 0
• Para as cores utilize o formato hexadecimal abreviado
• Defina as pseudo-classes para os links na ordem LoVe/HAte (Link, Visited, Hover, Active)
• Defina os elementos das margens (padding ou border) na ordem TRouBLed (Top, Right, Bottom, Left)
• Baseie o nome das classes ou das ID mais sobre suas funções que sobre suas aparências
• Aprenda a gerir as características da hereditariedade nas regras CSS
• Administre maiúsculas e minúsculas com os estilos
• Dê uma olhada nas fontes das folhas de estilo dos sites mais relevantes
• Busque inspiração dentre os gurus do design

Simplifique a sua vida quando desenvolve as folhas de estilo

• Teste os seus estilos no browser mais atual e evoluído e depois nos outros, e não vice-versa
• Quando estiver em dúvida, valide a fonte
• Na fase de desenvolvimento integre as declarações na página, quando estiver on-line importe-as de um arquivo externo
• Instale a web developer toolbar para Firefox
• Tenha a mão uma livraria de classes CSS prontas

Sabia que?

• É possível marcar classes múltiplas para elementos únicos
• Graças a isso é possível descompor um único estilo em classes que têm uma única variável ou constante, e destiná-las em sequência aos elementos da página
• Você pode se proteger dos spams com CSS
• É possível utilizar o php para tornar os estilos CSS dinâmicos

O artigo completo é 50+ CSS Best Practices and Coding Guidelines. Aconselho também 25 Sites You Shouldn’t Have Missed In 2005 do Vitaly Friedman’s Notebook. Boa leitura!