Existem várias maneiras de se fazer isso, porém hoje irei falar sobre apenas uma delas.

Já vi muitas pessoas tendo problemas para, por exemplo em Blogs, fazer thumbnail de imagens para ilustrar o artigo, e esta imagem deve ter um tamanho fixo.

Bom este é um problema sério, porque se em um blog o usuário que normalmente não é uma das mentes mais brilhantes, então podemos imaginar que ele não deve saber mexer com imagens e provavelmente vai colocar imagens em tamanhos esdrúxulos, que vão acabar com o design que você havia desenvolvido.

Para acabar com este problema basta você tem que usar PHP, e desta vez iremos usar um script feito pelo Tim McDaniels o TimThumb. Ele suporta imagens em .gif, .png e .jpg, sendo assim vou explicar como esse simples código pode ser usado.

Então primeiramente você deve verificar se o seu o seu servidor permite que você faça tais modificações com PHP, alguns servidores não permitem algumas funções da linguagem pois elas consomem muita Memória do servidor, para que isso não aconteça entre em contato com o suporte do seu e peça para que liberem o uso da livraria GD, de manipulação de imagens. Se não funcionar apenas peça para que liberem o uso do timthumb.php pois você gostaria de usá-lo. Lembre-se de pedir para que façam isso apenas na sua conta, se não eles não irão fazer.

Agora que nosso acesso foi liberado, siga até o seu FTP e crie uma pasta e re-nomeie-a para cache após feito isso você deve mudar as permissões desta pasta para 777, onde você permite que sejam gravados dados dentro da pasta.

Após feito isso coloque na pasta raiz desta que você acabou de criar, o arquivo timthumb.php.Mude agora as permissões desta pasta raiz para 777.

Agora vamos para parte onde iremos usar este arquivo para redimensionar imagens.

É muito simples, ao invés de usar o link comum da imagem iremos trocar por um parecido com este:

timthumb.php?src=/imagem/qualquer.jpg&h=150&w=150&zc=1&q=100

No link acima estamos passando alguns parâmetros para o arquivo PHP, eles são:

• src : URL
• h : Altura
• w : Largura
• zc : Aumentar e Cortar [0 ou 1]
• q : Qualidade [0 até 100]

Dessa forma podemos passar para o script algumas informações como se você deseja que ele aumente sua imagem e corte para cortar exatamente nas proporções desejadas, caso contrário ele apenas irá redimensionar e você terá uma imagem desfigurada quando esta mudar de proporção.

Dicas ao usar o Timthumb.php

Para fazer um melhor uso do script é importante fazer algumas coisas, como por exemplo, habilitar o cache colocando em seu .htaccess:

RewriteEngine on
RewriteRule .* - [E=HTTP_IF_MODIFIED_SINCE:%{HTTP:If-Modified-Since}]
RewriteRule .* - [E=HTTP_IF_NONE_MATCH:%{HTTP:If-None-Match}]

Não tente usar imagens de outros sites, porque não irá funcionar. Apenas imagens em seu servidor serão redimensionadas corretamente e não coloque o arquivo timthumb.php na raiz do seu site, coloque-o dentro de uma outra pasta, pois a necessidade de usar o nível de permissão 777 torna seu servidor vulnerável.

Ola galera, mais uma vez estou aqui trazendo um artigo que pode ser interessante para a maioria dos desenvolvedores, pois é uma maneira de rotacionar textos em todos os navegadores sem ter que fazer uso de nenhum tipo de imagem, o que torna o site bem mais leve.

Quando eu falo todos os navegadores é porque existe uma maneira de fazer funcionar no Internet Explorer também.

Para rotacionar textos no Firefox e em outros navegadores que tem os padrões de CSS atualizados é muito simples rotacionar qualquer tipo de objeto na tela (Webkit e Firefox 3.5), basta utilizar uma propriedade e falar quantos graus devem ser modificados, da seguinte forma:

-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);

Bem simples, porém como sempre temos um problema, chamado IE.

Que no meu ver não é tão ruim assim se você você estiver disposto em aprender como solucionar os seus problemas. São muitos mas boa parte deles já tem um bom Hack para concertar, basta ter interesse.

Para que rotacionar elementos funcione no Interent Explorer basta você usar os filtros que são fornecidos pelo MSDN no seu banco de dados para desenvolvedores.

No caso iremos usar o BasicImage, que é um filtro que te permite fazer vários tipo de manipulações com elemento, tipo transformá-lo em Preto e Branco.

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

Bom estermos usando a propriedade rotation do filtro, que nos permite girar o elemento em 4 ângulos diferentes com 4 inteiros diferentes, sendo eles: 0, 1, 2 e 3 e rotacionando em 0, 90, 180 e 270 graus respectivamente.

Essas propriedades só irão funcionar em elementos que tenham a propriedade de bloco, ou seja, para elementos de texto, como um span será necessário adiconar a seguinte propriedade ao elemento em CSS:

display:block;

Colocando em Prática os conhecimentos novos

Eu estava lendo um pouco do CSS-Tricks, um maravilhoso site sobre CSS, e me deparei com a dica de usar sprites para fazer as data dos artigos colocados no blog, para aqueles temas que usam um tipo de pequeno calendário para exibir a data.

Fiquei intrigado com a idéia, porém achei que era meio ruim para um site de longo prazo, que tem sei la uns 8 ou 9 anos de existencia, pensei que seria melhor apenas rotacionar os elementos. Mas ai me veio a idéia de que teria o Internet Explorer para me atrapalhar, e dias depois descobri o banco de dados para desenvolvedores da MSDN, e este tornou a idéia possível.

Então como fazer é bem simples, vamos aplicar o que aprendemos mais acima, vamos criar um código da seguinte forma:

<div class="data">
  <span class="dia">07</span>
  <span class="mes">Dez</span>
  <span class="ano">2009</span>
</div>

Após feito isso iremos adicionar um pequeno código CSS para que fique na posição que desejamos, e é claro adicionar a rotação:

<style type="text/css" media="screen">
	* { margin: 0; padding: 0px; outline:none; border:none; }
	body { padding:20px; font-family: Arial, Helvetica, sans-serif; }

	.data { background-color:#dedede; color:#3e3e3e; float:left; position:relative; padding:40px 5px 0px; }
	.data .mes { text-transform: uppercase; font-size:25px; }
	.data .dia { font-size:36px; line-height:45px; position:absolute; left:5px; top:0px; }
	.data .ano { display:block; font-size:12px; position:absolute; right:-5px; top:15px; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); }

	div.footer { position: absolute; bottom:0px; width: 95%; height:30px; padding: 15px 2%; border-top:1px solid #e1e1e1;}
</style>
<!--[if IE]>
	<style>
		.data .ano { filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); right:2px!important; top:8px!important; }
	</style>
<![endif]-->

Após adicionado este CSS deve ficar como na imagem abaixo:

Você pode dar uma olhada se funciona no seu navegador, caso não funcione da maneira que deveria, por favor deixe um comentário com as informações do seu navegador

Estes dias eu comecei a desenvolver um tema chamado de DevStart, o qual vou disponibilizar aqui no blog, e me deparei com um problema ao usar esta função maravilhosa do WordPress.

A função body_class(); é muito útil quando você tem que desenvolver um tema e gostaria de fazer um pouco de dinamismo nas cores, por exemplo, pois colocando-a dentro da tag <body> adicionamos classes à tag que dizem algumas informações sobre que página o usuário está visitando, e desta forma podemos aplicar o devido CSS.

O problema que eu me deparei ontem quando comecei a implementar esta função, foi que ela adiciona todo o texto class="classes", e isso é ruim, mesmo que a função nos permita adicionar nossas classes, não me permite usar um plugin em jQuery para descobrir qual navegador o sujeito usa. Então fiz um pequeno hack para fazer a função apenas adicionar as classes.

Bom primeiro vou explicar como é o uso normal da função. A função, como eu já citei anteriormente deve ser colocado dentro da tag <body>, da seguinte forma:

<!--Cabeçalho acima-->
<body <?php body_class(); ?>>
<!--Corpo da página abaixo-->

Se for usado desta forma teremos o seguinte resultado quando estivermos na home do nosso blog e logados no sistema:

<!--Cabeçalho acima-->
<body class="home blog logged-in">
<!--Corpo da página abaixo-->

O que eu fiz foi bem simples, utilizando uma função chamada get_body_class();, que é a função que faz todas as verificações e define em uma variável todas as classes que devem ser adicionadas e retorna um array, eu usando o implode(); do PHP eu criei uma função no arquivo function.php para solucionar o nosso problema e apenas escrever as classes.

Então vamos abrir o arquivo functions.php e vamos adicionar o seguinte código:

function echo_body_class() {
	echo implode(" ", get_body_class());
}

Este código cria a função echo_body_class(); e transforma o array retornado em apenas uma string separando cada um dos resultados com um espaço.

Bom agora acesse seu arquivo que contém a tag <body> e substitua-a pelo seguinte:

<!--Cabeçalho acima-->
<body class="<?php echo_body_class(); ?>>">
<!--Corpo da página abaixo-->

Então teremos o mesmo resultado que com a função body_class(); porém agora poderemos adicionar todas as classes que nos forem interessantes. Problema resolvido.

Ahh e sobre este tema que estou desenvolvendo, ele vai ser colocado aqui no blog para download, e sua principal função é servir como tema base para o desenvolvimento de outros.

Bom galera como você já sabem quando rola algum evento aqui no Rio de Janeiro e eu tenho a possibilidade de ir, vai ter uma cobertura no estilo M/M aqui no Webord. Basta o evento ter disponível uma rede Wi-Fi e uma tomada para a energia do LapTop!

Então para os que tem interesse, vocês podem ver qual é a programação do evento, na página inicial do site do evento. Abaixo vocês vão encontrar as atualizações do que está rolando no evento neste momento. Leia Mais

Bom galera, estou aqui neste, para dar uma dica de como facilitar a sua vida como desenvolvedor. Está é relacionada com a criação de um arquivo de CSS que pode e deve ser usado em qualquer tema de WordPress, para facilitar na hora do editor que já vem no próprio sistema.

Seguinte, o sistema vem com alguns padrões para alinhamento de textos, imagens e a criação de captions, e a implementação de todo esse código depende do Desenvolvedor, porém eu já a algum tempo criei um arquivo que uso como adendo, e este já contém todos os códigos que passam as informações referentes às classes usadas por padrão do WordPress.

Então você pode fazer o download do arquivo com esses códigos padrões do WordPress, e colocar na pasta do seu tema, e apenas adicionar o seguinte código na header.php do seu tema:

<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/wp.css" type="text/css" media="all" />

É basicamente isso, qualquer pergunta ou dúvida, comentem que eu vou responder.

Primeiramente gostaria de explicar o porque da falta de artigos no blog, eu estou em semana de provas no colégio, aquela semana onde sua vida se resume a estudo e dormir, porque o resto deixa de ser possível fazer. Mas hoje tenho uma folga, graças a amanhã só ter 1 prova e ai dá tempo de escrever algo interessante aqui.

Estes dias, antes das provas, eu estava estudando o HTML 5 a fundo, pois ele segundo Matt Mullenweg e a Google, é o futuro da Web. Bom eu estou me interessando bastante com as possibilidades, e possivelmente teremos aqui um artigo com o que eu estou vendo de interessante nessa linguagem. Mas por enquanto gostaria de comunicar algo a vocês, o XHTML como um todo VAI subir no telhado, e logo teremos uma perda… OU NÃO!

A seguinte passagem foi escrita no site da W3C estes dias:

2009-07-02: Today the Director announces that when the XHTML 2 Working Group charter expires as scheduled at the end of 2009, the charter will not be renewed. By doing so, and by increasing resources in the HTML Working Group, W3C hopes to accelerate the progress of HTML 5 and clarify W3C’s position regarding the future of HTML. A FAQ answers questions about the future of deliverables of the XHTML 2 Working Group, and the status of various discussions related to HTML. Learn more about the HTML Activity.

Seguinte, acima é dito que o grupo de desenvolvimento para o XHTML 2 vai ser fechado no final de 2009, e não irá voltar. Fazendo isso a idéia é acelerar o processo de desenvolvimento do HTML 5.

Bom é possível que quando o desenvolvimento do XHTML 2 fora iniciado já tenha começado sem futuro algum, primeiramente devido ao Internet Explorer e depois o HTML 5 já irá cobrir o XHTML de forma interessante.

Na minha opinião e da maioria dos desenvolvedores, o HTML 5 é o futuro da internet, então minha dica é a seguinte:

Deixe de desenvolver com hacks para o azul e comece a pensar no HTML 5!

Na versão 2.7 do WordPress surgiu uma função que permite com que certos artigos se tornem fixados, ou seja, deveriam aparecer na frente de todos. Mas não é tão simples assim você deve adicionar um código ao loop do seu WordPress para que isso possa acontecer da maneira correta, e organizada.

Como é uma rapidinha vamos ao código:

<?php
	$sticky = get_option('sticky_posts');
	rsort( $sticky );
	$sticky = array_slice( $sticky, 0, 5);
        query_posts( array( 'post__in' => $sticky, 'caller_get_posts' => 1 ) );
?>

Bom insira este código antes do começo do Loop do seu WordPress, bom espero que você já tenha um no seu.

Quando der tempo irei fazer um artigo falando sobre Artigos Fixados com mais detalhes, por hora é só isso.

[ Via JustinTadlock ]

Bom estava aqui em casa terminando um trabalho do colégio e me surge o seguinte tweet de @jurandirfilho sobre tal façanha.

Abaixo você encontra o primeiro vídeo e o segundo, ambos muito bem acabados vale a pena ver.

Primeiro MAC VS. PC

Segudno MAC VS. PC 2

Caso queira acompanhar o site do criadores já está online, visite e veja mais sobre os vídeos.