Webord.net: WordPress, jQuery, SEO, .htaccess, xHTML, CSS, Desenvolvimento, Design

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);
-o-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 consertar, 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);-o-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

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!

Bem gente como eu estou com muito pouco tempo estes dias, porque ainda tenho uma vida social e um colégio, estou fazendo a série chamada de Rapidinhas que irei colocar códigos rápidos que irão te facilitar a vida e te ensinar alguns pequenos hacks.

Hoje irei deixar uma dica de como adicionar um botão aos disponíveis na parte de edição HTML do seu WordPress, que basicamente pode ser usado para facilitar muito sua vida, caso use muito uma tag ou outra.

Se você acessar a administração do seu WordPress e for criar um novo artigo com a edição HTML você irá ver um menu muito parecido com este:

Estou mesmo sem tempo, então já indo para a prática. Acessem o arquivo quicktags.dev.js que se encontra no diretório wp-includes/js.

Mas não se esqueça que na versão 2.8 do WordPress esse arquivo foi comprimido e é impossível editar, porém felizmente foi deixado uma versão para desenvolvimento, chamada de quicktags.dev.js, então é necessário criar um backup do .dev.js nessa mesma pasta, algo como quicktags.orginal.js. Após feito isso podemos começar a editar o .dev.js.

Encontrem o local mais conveniente entre os botões já existentes e coloque este código:

edButtons[edButtons.length] =
new edButton('ed_h3'
,'h3'
,'<h3>'
,'</h3>'
,'h3'
);

Na hora de salvar salve como quicktags.js e voilá!

Qualquer dúvida ou sugestão para um artigo de Rapidinha basta deixar um comentário que eu com certeza irei responder!

[ Via DiggIntoWordPress ]

Galerinha estou aqui para deixar uma pequena dica para blogs. Muitos blogs tem um tamanho de imagem máximo que pode ser colocado, que é definido pelo tamanho da área de conteúdo do seu site.

Para fazer com que sua imagem nunca passe do tamanho da área de conteúdo basta adicionar o seguinte código no CSS do seu site/blog:

.single-entry img {
    max-width: 580px;
    height: auto;
}

Ajuste a quantidade de Pixels de 580 para o que for necessário, e veja qual o campo que as imagens do seu blog vão estar[single-entry].

Espero que gostem e comentem, essa é uma série de dicas que são bem rápidas mas bem úteis.

Olá galerinha, estou aqui por meio deste para lhes contar um pouco de como foi a WordCamp Brasil 2009 e a CMS Brasil 2009.

Sou desenvolvedor WordPress, então logicamente irei falar mais sobre as palestrar que mais participei, de WordPress.

Webord.net nos dois eventos de CMS

Bom de começo posso contar que ambos foram eventos de altíssima qualidade, com palestras muito boas, e bem organizadas. Na CMS Brasil meu único adendo é que na próxima poderíamos ter um lobby maior para que pudéssemos ter uma área um pouco maior para circular e olhar os stands.

Nos dois eventos, quem deveria fazer a primeira palestra deveria ser o Matt Mullenweg, porém no WordCamp, a palestra dele foi deixada para ser a segundo para esperar que mais pessoas chegassem.

Aos que conhecem WordPress e sua comunidade sabem que é uma comunidade muito forte, porém apareceram poucas pessoas, talvez e na minha opinião deve ser porque era gratuito, então quem iria não ficou tão animado assim porque no dia anterior teve o CMS Brasil. Minha humilde sugestão é que no próximo tenhamos uma pequena taxa, tipo 25 reais para que as pessoas que se registraram irem. Leia Mais

Estou aqui desta vez para falar-lhes sobre um problema que me ocorre muito e após descobrir este código tive minha vida facilitada! Em suma esse código irá comparar o tamanho de todos as colunas indicadas e fará com que elas se tornem do mesmo tamanho, usando como base a maior. Leia Mais

Olá galera meu nome é Gustavo Silva Bordoni, tenho 16 anos e moro no Rio de Janeiro.  Sou mais um dos aficionados por tecnologia que resolveu criar seu próprio Blog sobre o assunto.

Minha proposta é bem simples, quero transmitir o máximo de informação útil para quanto for possível.

Não vou ficar muito em explicações, vou direto ao ponto principal deste artigo, achei um pequeno e muito útil hack no site do Chris Coyer e resolvi colocar aqui. Uma correção muito simples usando CSS para o serrilhado deixado pelo redimencionamento feito pelas propriedades height e width no HTML.

Para fazer tal correção basta você adicionar a seguinte propriedade em seu arquivo .CSS:

img { -ms-interpolation-mode: bicubic; }

Tal correção não irá funcionar em imagens com transparência, como as .png e as .gif.

Editado em 26-03-09:

O comentário do Rafael Silva adicionou uma informação sobre o IE 8, falando que esse código já é nativo no IE8.