Olá caros leitores, no post de hoje falaremos sobre “Code Snippets” em tradução livre “Trechos de Código”, um conceito que vem crescendo bastante à medida que o mercado exige mais agilidade e rapidez de seus funcionários.

No ultimo post falei um pouco sobre o que aconteceu no “Workshop Front-End Egineering em Escala Global” realizado no ultimo dia 15 de Janeiro em Recife – PE, pois bem, seguindo o conselho do mestre Berg Brandt, Front-End da Yahoo, estudei a fundo as técnicas empregadas com esse sistema de desenvolvimento e tive algumas oportunidades de colocá-las em pratica, e durante minha escalada em busca de mais conteúdo relacionado ao assunto fui apresentado ao “Css-Tricks.com/Snippets”, um repositório repleto de códigos de uso comum entre desenvolvedores e programadores web, que pelo menos para mim esta sendo um prato cheiro.

O site dispõe de centenas de trechos de códigos organizados por categorias:

• CSS
• HTAccess
• HTML
• JavaScript
• jQuery
• PHP
• WordPress

Este magnífico repositório conta com desde códigos como a “Estrutura simples de um documento XHTML Strict” ate “Efeitos de Acordeom” usando jQuery, confira alguns exemplos:

CSS Snippets – PNG Hack/Fix para IE6

Background-images

.yourselector {

width:200px;

height:100px;

background: url(/folder/yourimage.png) no-repeat;

_background:none;

_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’/folder/yourimage.png’,sizingMethod=’crop’);

}

Inline images

img, .png {

position: relative;

behavior: expression((this.runtimeStyle.behavior=”none”)&&(this.pngSet?this.pngSet=true:(this.nodeName == “IMG” && this.src.toLowerCase().indexOf(‘.png’)>-1?(this.runtimeStyle.backgroundImage = “none”,

this.runtimeStyle.filter = “progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’” + this.src + “‘, sizingMethod=’image’)”,

this.src = “images/transparent.gif”):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace(‘url(“‘,”).replace(‘”)’,”),

this.runtimeStyle.filter = “progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’” + this.origBg + “‘, sizingMethod=’crop’)”,

this.runtimeStyle.backgroundImage = “none”)),this.pngSet=true));

}

jQuery Snippets – Fixing IE z-index

Com jQuery

$(function() {

var zIndexNumber = 1000;

// Put your target element(s) in the selector below!

$(“div”).each(function() {

$(this).css(‘zIndex’, zIndexNumber);

zIndexNumber -= 10;

});

});

Com MoonTools

if(Browser.Engine.trident){

var zIndexNumber = 1000;

// Put your target element(s) in the selector below!

$$(‘div’).each(function(el,i){

el.setStyle(‘z-index’,zIndexNumber);

zIndexNumber -= 10;

});

};

Esses são apenas dois exemplos de Code Snippets, como eu disse antes dentro do site você encontrará diversos outros códigos que com certeza serão de grande ajuda em seus projetos, pois você irá economizar grande parte de seu tempo simplesmente reciclando o código.

Espero que gostem da dica e aproveitem bastante esse site, pois isso é conteúdo raro e dificilmente você encontrará algo parecido e grátis. Um Abraço!

Endereço: http://css-tricks.com/snippets/
Criador: Chris Coyer

Por ainda estar em fase de estudos tenho muitas duvidas quanto ao funcionamento desta magnífica ferramenta de gestão de blogs, simplificando: WordPress.

Na ultima semana senti a necessidade de contar apenas com um pequeno resumo de meus posts na página principal e em buscas por palavras chave e tags, confesso que fique abismado com a falta de usuários que pudessem me ajudar com isso, depois de muito pesquisar em muitos sites, blog e fóruns consegui juntar diversos pontos importantes para complementar um tutorial de como conseguir este objetivo.

Como fazer:
Muito simples, basta alterar o código de arquivos do template, cujo a função é exibir os posts contidos no bando de dados.

Na maioria dos Themes, os arquivos a serem alterados são: index.php home.php e archive.php.

Procure pela seguinte linha de código php:

the_content(Read the rest of this entry »’);

Troque: the_content por: the_excerpt
Faça isso em todos os arquivos que encontrar com a função the_content e todos os posts apareceram em resumo excerto em seu link permanente.

Benefícios:
Essa troca ira diminuir as chances de seu blog sofrer punição dos buscadores por conteúdo duplicado além de melhorar a usabilidade e proporcionar uma melhor indexação do seu conteúdo em sites de busca.

Espero ter ajudado e espero que esse tipo de informação no futuro seja mais presente na internet, afinal onde esta aquela “Web colaborativa”?

Tenho o prazer de lançar o novo design do blog, infelizmente não é de minha autoria, apenas apliquei algumas modificações necessárias para o bom funcionamento e maior usabilidade da interface.

No último post intitulado “Nova fase!”, comuniquei que ocorreriam diversas modificações em meus projetos pessoais, uma deles seria um novo layout para o blog.
Minha intenção era usar um tema de minha autoria, mais infelizmente o tempo não me permite fazer isso no momento, por isso depois de muito pesquisar optei pelo “Motion”, que é disponibilizado no BD do próprio WordPress.

Mais seguindo a dica do Guto Gomes, no futuro irei desenvolver um layout personalizado seguindo as novas tendências do mercado, ou seja, html 5 e css3.
Então vale aguardar por mais novidades no blog e também no site, que inclusive está na fase final de desenvolvimento.

Estou aberto a criticas, então deixem seus comentários a respeito do novo layout..abraço!

Sejam todos benvindos ao segundo primeiro post do meu blog, segundo por que o primeiro infelizmente foi apagado devido a complicações com meu banco de dados, mais graças a minha velha e boa paciência estamos no ar novamente e espero sinceramente que seja em definitivo.

Para quem não leu o post original re-lembrarei o propósito deste blog. Com esta poderosa ferramenta para gestão de blogs chamada wordpress trarei aqui um pouco do meu ínfimo conhecimento, com artigos e dicas para programadores de web designers que estão começando e é claro com os que já estão na luta a muito tempo, como não sou nenhum “jedi” também espero contar com a colaboração de todos os meus leitores para fazer desta algo cada vez maior e melhor, fazendo valer o titulo que a internet leva de “grande rede de colaboração”, então é isso galera conto com o apoio de todos e ate o próximo post.

Abraço!