Seguindo com a série de posts sobre CSS3, hoje vamos falar sobre bordas e sombra(border e shadow em inglês) com CSS3, mais especificamente falaremos sobre:

• border-color
• border-image
• border-radius
• box-shadow

Se você não viu o post anterior a este, é bom ver agora :

Iniciando com CSS3

A partir de agora os tutoriais desta série serão feitos em HTML5 e CSS3, então pare de usar Internet Explorer < 9. Se você ainda não conhece os seletores em CSS3, veja o artigo anterior.  Algumas propriedades só funcionam em determinados browsers, mais quando isso ocorrer vou informar .

Para não ficar perdido na sintax de cada propriedade, tente “decorar” esta pequena legenda abaixo:

[] – propriedade variante, ou seja, pode se X ou Y.

[]? – propriedade opcional.

| ou || – que dizer ou. Exemplo: X || Y (x ou y).

<> – é um valor definido pelo desenvolvedor – você.

{} –  geralmente é o número de vezes que se deve usar um determinado valor. Exemplo left{4}, seria left left left left.

Border-colors

Define a cor da borda. Neste caso as cores da borda.

Sintax: -moz-border-[top | bottom | left | right]-colors: [<cor>]* <cor> | none

Antes que atirem pedras em mim falando que border-color funciona em todos os navegadores, lembre-se que estamos falando de CSS3 e border-colors está no plural – não border-color.  Sendo assim, essa novidade só funciona no Firefox (e demais feitos com a mesma engineer – Gecko) :

div#border-colors{
	background: #CCC;
	padding: 20px;
	border: 10px solid #666;
	-moz-border-bottom-colors: #A2A2A2 #FFEFEF #770000 #4504C1 #016FD5 #10BAD0 #A2A2A2 #FFEFEF #770000 #4504C1;
	-moz-border-top-colors: #300 #600 #700 #800 #900 #A00;
	-moz-border-left-colors: #300 #AAA #222;
	-moz-border-right-colors: #A2A2A2 #FFEFEF #770000 #4504C1 #016FD5 #10BAD0;
}

O segredo por trás dessa propriedade é o tamanho – width – da borda e o n° de cores. Por exemplo, se eu tenho 5px de width, logo é “bom” eu usar cinco cores (#111 #222 #333 #444 #555). Disse “bom” porque você pode sim usar mais cores,  só que a bagunça nem você vai entender, se é que você esta entendendo agora .

As cores sempre começam de fora para dentro, ou seja #111 será a primeira cor, ou a cor mais distante do elemento e #555 será a última, ou a cor mais próxima (colada) ao elemento.  Se você usar 4px de width, com somente 2 cores(#F00 e #CCC), o primeiro pixel (1px) será na cor #F00 e os demais (3px) na cor #CCC.

Veja o exemplo | Mais detalhes

Border-Image

Basicamente usa uma imagem no lugar da cor em uma borda. Funciona em todos os navegadores com suporte a CSS3.

Sintax: [-moz- | -webkti-]?border-image: <uri> [<numero> | <porcentagem>]{4} [ / <tamanho>{1,4} ]? [stretch | repeat | round]{0,2} | none

h3 + div{
	color: #000;
	padding: 20px;
	border: 10px solid #666;
	border-width:15px;
	border-image: url(borda.png) 27 27 27 27 round round;
	-moz-border-image: url(borda.png) 27 27 27 27 round round;
	-webkit-border-image: url(borda.png) 27 27 27 27 round round;
}

Na sintax primeiramente temos a url da imagem e depois quatro números. Estes 4 números ou porcentagens, são os valores que especificam qual parte da imagem será usada para a borda, ou seja, qual parte da imagem será cortada para criar a borda. Por exemplo, tenho uma imagem e quero corta 5px dela em todos os lados, para isto eu usaria: 5 5 5 5. Os 4 números são respectivamente top, right, bottom e left . Os números são valores em px – somente px, você não pode colocar 5px ou 5em por exemplo, só é aceito 5(ou seja somente NUMEROS!!!) ou em porcentagem – ai teria de ser 5%.

Opcionalmente também podemos definir o tamanho da borda para cada lado. Para isso usamos a barra “/“, seguida das quatro medidas – uma para cada lado – que podem ser em qualquer formato, px, em, pt...apenas temos que lembrar de usar “/” para “dizer” ao CSS que estes valores são para o tamanho da borda, ou melhor dizendo border-width.

Depois, vem o modo como a imagem será tratada. Os valores são:

stretch – a imagem gerada é redimensionada (de qualquer forma) para se encaixar, distorcendo a imagem.

round – redimensiona a imagem (proporcionalmente) para que se encaixe na área, também acontece a repetição da imagem mais não em partes, se vai repetir repete a imagem por inteiro, sem corta-la.

repeat – sem segredo…repete a imagem até que se encaixe na área, mais ou menos como acontece com background-repeat. Uma boa prática é definir uma borda “reserva”, ou seja, a cor de borda e usar imagens sem transparência…assim se ocorrer algum erro no border-image a borda “reserva” entra em cena.

Alguns pontos interessantes:

• Não é bem uma borda com imagem, é mais um segundo backgrund, só que mais complicado.
• Webkit trata border-image um pouco diferente dos demais, então pode ficar complicado conseguir a mesmo resultado em todos os navegadores.
• Em alguns casos, o Opera também faz o tratamento diferente do esperado.
• Opera não rendeniza border-image se tive a barra “/” com o tamanho da borda. So não usar os valores opcionais (e a barra) que resolver o problema .
• Eu não uso border-image nem me pagando!!! Mas esta ai pra quem quer aprender e usar.

Veja o exemplo | Mais detalhes

Border-Radius

Este é o que mais uso. Faz com que a borda fique redonda (mesmo que não haja border no elemento).

Sintax: [-moz-|-webkit-]?border-radius: [<comprimento> | <porcentagem> ]{1,4} [ / [ <comprimento> | <porcentagem> ]{1,4}?

div:first-child{
	background: #EEE;
	border: 1px solid #CCC;
	padding: 20px;
	margin: 10px;
	border-radius: 25px 0 0 25px;
	-moz-border-radius: 25px 0 0 25px;
	-webkit-border-radius: 25px 0 0 25px;
}

Usar border-radius é tão simples quanto definir margin ou padding a um elemento. Obviamente são quatro posições disponíveis para “arredondamento”. As posições são divididas em top (top-left e top-right) e bottom (bottom-left e bottom-right). Na ordem certa seria: top-right, bottom-right, bottom-left e top-left.

Como acontece no border-image, há mais 4 medidas opcionais seguidas pela barra “/”. Neste caso as medidas representam um quarto da elipse para cado posição. É um recurso avançado e de difícil entendimento, por isso é importante o domínio da matemática – mais especificamente elipse –  para não ter problemas em entender como funciona “por trás” o border-radius. Não vou me ater a detalhes aqui para não tornar a leitura cansativa, mais uma vez entendido como funciona a elipse, é só relacionar e fazer alguns testes que você irá compreender rapidamente.

Se você, por obra do destino (rs) não usar esta propriedade em formato shorthand, precisará “queimar” um pouco mais de neurônios para decorar a lista no formato expandido. O chato é que para cada enginer a sintax é diferente, observe:

/*Mozilla*/
-moz-border-radius-topleft: 4px 2px;
-moz-border-radius-topright: 3px 4px;
-moz-border-radius-bottomright: 6px 2px;
-moz-border-radius-bottomleft: 3px 4px;

/*Webkit*/
-webkit-border-top-left-radius: 4px 2px;
-webkit-border-top-right-radius: 3px 4px;
-webkit-border-bottom-left-radius: 6px 2px;
-webkit-border-bottom-right-radius: 3px 4px;

/*Demais - Webkit é um pouco semelhate a este*/
border-top-left-radius: 4px 2px;
border-top-right-radius: 3px 4px;
border-bottom-left-radius: 6px 2px;
border-bottom-right-radius: 3px 4px;

Neste caso o quarto da elipse passa a ser o segundo valor em cada propriedade.

Considerações:

• Priorize o formato shorthand.
• Bordas no estilo dashed e dotted, são rendenizados formato sólido – solid.
• Valores em porcentagem não funcionam no Webkit.
• Webkit não suporta somente um valor para todos os lados, é necessário que use pelo menos 2 valores para funcionar corretamente – No Chrome funciona, mais no Safari não.
• Em alguns casos pode ser que você não consiga o mesmo resultado no Webkit mesmo usando a sintax corretamente. Para corrigir este problema, no Webkit use as medidas para cada lado em propriedades separadas.

Veja o exemplo | Mais detalhes

Box-shadow

A propriedade box-shadow adiciona uma sombra ao elemento, podendo ser por dentro(inset) ou por fora…É um efeito muito interressante  e de grande utilizade principalmente para performance do site, já que ele substitui imagens.

Sintax: [-moz-|-webkit-]?box-shadow:  <sombra> [ , <sombra ]* | none

<sombra>: inset? && [ <posicao-x> <posicao-y> <blur-radius>? <spread-radius>? <cor>? ]

:root h3 + div{
	background: #FFF;
	border: 1px solid #ddd;
	padding: 20px;
	margin: 50px;
	box-shadow: 2px 2px 2px 0 #eee;
	-moz-box-shadow: 2px 2px 2px 0 #eee;
	-webkit-box-shadow: 2px 2px 2px 0 #eee;
}

Como podemos ver acima, primeiramente temos as medidas para posicionamento X e Y, estes podem ser em qualquer formato (px, em…). Para melhor entendimento, a posição X é o mesmo que posição horizontal relativa ao elemento (lembra do eixo X e Y do plano cartesiano?).

Por exemplo, se eu tenho uma div com 500px de largura e no box-shadow eu definir 2px para a posição X, seria o mesmo que criar uma uma “segunda div” (que é o box-shadow) com a mesma largura (500px) e margin-left de 2px, ou seja ela (a “segunda div”) ficaria 2px à frente. É mais ou menos assim que funciona o posicionamento do box-shadow. Para a posição Y seria a mesma coisa, mas no eixo vertical.

Logo após as posições temos o blur-radius, que é o responsável por criar o efeito do sombreamento. Na sintax diz que este valor é opcional, com o padrão sendo 0 (zero). Se você quer o efeito de ofuscamento no sombra, você deve setar o valor para esta propriedade, caso contrário ficará uma sombra “reta”.

Ao definir o valor para maior que 0 (zero) para blur-radius, a “segunda div” que citei anteriormente será aumentada em sua largura e altura. por exemplo, se o valor de blur-radius for igual a 5px , a “segunda div” passará a ter 510px de largura e 510px de altura. Recomendo que você tenha isso sempre em mente, pois irá diferenciar no posicionamento da sombra.

Outro valor opcional é o spread-radius. Sua função é semelhante ao blur-radius…também aumenta o tamanho da sombra (a “segunda div”), só que sem criar o efeito de ofuscamento. É uma segunda propriedade, e pode ser muito útil em alguns casos.

Concluindo, para o último valor, temos a cor da sombra, aqui não há segredo. Somente vale lembrar que se houver valor para blur-radius maior que zero, então a cor na largura – ou valor – do blur-radius será enfraquecida para criar o efeito de ofuscamento.

Vamos as observações:

• No posicionamento, você também pode usar valores negativos, neste caso a sombra seria rendenizada no lado oposto ao padrão.
• Blur-radius não suporta valores negativo.
• Opera não aceita o valor inset, isto causará um erro e a propriedade será ignorada.

Veja o exemplo | Mais detalhes

Bônus 1: Apostila CSS3

No final desta série vou disponibilizar estes post em uma apostilha. Então comentem sobre a idéia, deêm sugestões e aguardem para fazer o download .

Até a próxima.

Porque Usar Shortlinks?

Como o número de caracteres nas redes é bem limitado – 140 caracteres no Twitter por exemplo – algumas URLs ultrapassam esse limite, perdendo a utilidade em redes sociais para compartilhamento. Isto acaba sendo um ponto negativo quando se tem um post ótimo, que deve ser compartilhado.

Até pouco tempo atrás a solução era usar um encurtador de urls para compartilhar o link, era – e ainda é – um pouco cansativo ter de abrir o site do encurtador, colar o link original, pegar o novo link e sair distribuindo. Esta era a solução!!!!

Além disso, faltaram alguns pontos que quase ninguém parou para pensar, sim estou falando sobre SEO e os encurtadores…faltaram questões como:

• O redirecionamento é 301, 302…?
• O site vai receber o link juice da URL encurtada?
• O Page Rank vai para o encurtador ou para o site?
• etc…

Com os shortlinks providos pelo WordPress, você não vai precisar fazer responder a estas perguntas ou até mesmo ter de refazer sempre o mesmo processo em um encurtador. Outro ponto é que o WordPress 3.0 também gera automaticamente um link no cabeçalho (antes de fechar a tag </head>) com o shortlink, seria algo +/- assim:

<link rel="shortlink" href="http://www.seusite.com/?p=717" />

O segredo por trás desta funcionalidade é justamente o ID do post, como você pode ver – /?p=717.

O Shortlink

Há duas formas de usar o shortlink, diretamente pelo editor de posts no administrador clicando em pegar link permanente ou através de funções especiais para este fim. O modo “gráfico” você pode ver na imagem abaixo:

Funções Para Shortlink

A função nativa do WordPress para shortlink é wp_get_shortlink(), mas não existe nenhuma documentação ou coisa do tipo para esta função, então vamos considerar que é uma função interna e não distribuida do WordPress . É bem útil quando você precisa somente do link para ser usado em alguma outra funcionalidade do site.

$shortlink = wp_get_shortlink();
echo $shortlink;

Uma dica é usar a função acima juntamente com a função the_title(); para criar um link de compartilhamento no Twitter por exemplo. De modo bem simples seria algo mais ou menos assim:

<a href="http://twitter.com/home?status=<?php the_title(); ?> <?php echo wp_get_shortlink(); ?>">Twittar</a>

Agora se você quer uma função que crie um link para o post é so utilizar a função the_shortlink(), que também é nativa do WordPress:

the_shortlink();

Customizando a função:

the_shortlink('Mini-link', 'Link resumido para este post');

Removendo o Link de Cabeçalho Shortlink

WordPress gera automaticamente o link no cabeçalho que citei no inicio do post. Se você não deseja que o WordPress gere este link, é só usar a função remove_action. Copie e cole o código a seguir no arquivo functions.php ou onde você quiser – só se você souber o que está fazendo – para remover a meta-tag.

remove_action('wp_head','wp_shortlink_wp_head', 10, 0);
//Se quiser adicionar é so alterar "remove_action" por "add_action", mais isso não tem funcionalidade nenhuma oO

Era isso o que tinha para falar, mais antes de terminar o post vou deixar alguns links para maiores detalhes sobre as funções, os parâmetros que elas aceitam e etc…ai você vai ficar fera em shortlink:

Códigos de redirecionamento
Referência da função the_shortlink();
Referência da função the_title();
Referência da função remove_action();
Referência da função add_action();

Agora é so compartilhar que aqui no site já esta sendo usado os shortlinks . Até a próxima.

Página do projeto | Instruções | Demo 1 | Demo 2

A Estratégia

A estratégia que montei para este plugin tem o mesmo objetivo dos demais, mais de uma forma diferente. Basicamente os plugins atuais ou pedem unicamente para atualizar o Internet Explorer ou usar outro navegador, o que não acho interessante em nenhum dos casos. Mais por quê? Simplesmente porque se eu unicamente atualizar o Internet Explorer 6 para uma versão mais recente (no momento seria o IE8), os outros browser que convenhamos, são melhores, iriam “ficar de lado”, o que não considero bom pois as novidades estão surgindo dos “outros” browser, além da taxa de novas atualizações serem bem maior do que o Internet Explorer. Há mais motivos, mais você já deve estar processando em sua mente boa parte deles .

Por outro lado, se eu somente migrar para outro navegador, o bendito do IE6 vai continuar instalado no PC do seu visitante, correndo o risco de volta e meia ele usar o IE6, o que não queremos.

Bom diante disso o Adeus IE6, primeiramente bloqueia o usuário (em outra palavras ele não navega no site ), “forçando” a atualização…mais ele vai ser convencido de que será melhor atualizar logo seu navegador .  Em primeiro caso a atualização do Internet Explorer, depois…se ele quiser…ele testa outro browser (Melhor um pássaro na mão do que 2 voando). Enfim o visitante terá todas as opções, agora caberá a ele fazer a sua escolha.

Tome Cuidado

Falo isso pois cada website tem a sua realidade…este site por exemplo, desde que foi desenvolvido, foram 889 visitas do IE6 no prazo de 1+ ano, em comparação ao total de visitas não chega nem a 4% (to falando sério). É claro que meu público alvo são webdesigners e relacionados, ou seja, ninguém usa IE6, o que já não ocorre em um portal de uma cidade por exemplo. Não da pra você bloquear usuários do IE6 em site se eles fazem boa parte dos visitante…é suicídio fazer isso!!!

Adeus IE6 Veio Para Somar

Adeus IE6 é somente uma forma diferente para uma boa ação: atualizar o Internet Explorer 6. Se você não gostou desse plugin, vou listar os melhores que já vi na internet, veja qual se encaixa à sua necessidade e use-o!!!!

IE6 No More – Exibe um alerta para a atualização do navegador. Em diversas línguas.
Update Your Browser -  Criado por Richard Barros também é uma ótima opção para quem deseja um modelo mais simples. Vale a pena dar uma conferida. Também em diversas línguas.
Atualize seu Navegador – Campanha patrocinada pela iMasters para eliminar browsers antigos do mercado.

Como Usar Adeus IE6?

Simples, fácil e rápido. Apenas cole o código a seguir no seu site ou pegue o código fonte no Github - personalize, mude as cores, faça o que quiser, contando que ajude a dar um fim no Internet Explorer 6 já é mais do que suficiente (Não se esqueça de dar os devidos créditos para quem fez ).

<!--[if lt IE 7]>
<script type="text/javascript" src="http://mateus007.github.com/Adeus-IE6/jquery.adeus.ie6.min.js"></script>
<![endif]-->

Não é necessário iniciar o plugin, o processo já é automático… Lembre-se também que Adeus IE6 é um plugin jQuery então é necessário que você tenha a biblioteca em seu site.  Se você vai passar a usar o plugin, obrigado por apoiar este projeto, se não thanks pela leitura…

Comentem o que acharam e divulguem para a sua rede de contatos!!!

AEEEEEEEEEEE, ta no ar!!!!!!!! Bom não vou fazer um post extenso só vou explicar rapidamente as diferenças de destaque para ninguém ficar perdido:

• Feito com Linha Framework;
• WordPress 3.0, com template compatível;
• Re-design simples, sombras mais fortes e sai alguns itens;
• Revisão e ajustes de todos os posts;
• Uso e abuso de CSS3;
• IE6 não acessa mais (já teria que ter feito isso desde a versão anterior);
• Sai Página de Serviços (embutida na página Sobre Mim);
• Javascript em várias partes do site (teste e veja , hehe);
• Compartilhamento (Share) mais fácil;
• Validação mais eficiente de formulário de contato e comentários;
• Reply (responder) comentários;
• Verifiquem a página de ERRO 404 .
• Novo sistema de gerenciamento dos arquivos e demos.
• Outras coisas ai…

Pessoal é isso, espero que tenham gostado das alterações.

Pra não esquecer, rsrs: Espero estar mais presente no blog também e fazer uns screencasts que estou prometendo a um tempo. Se tiverem algum assunto de preferência, comenta ai que eu vou estudar a possibilidade.

Linha Framework

Trata-se de um framework (meio obvio não?) para desenvolvimento front-end – HTML, CSS e Javascript. Se você já usou algum grid CSS, como o 960.gs ou Blueprint por exemplo, irá se familiarizar facilmente com este framework, mas o Linha Framework é mais completo.

É mais completo pois não fica somente no grid CSS, temos o grid template (PSD), marcação HTML e CSS em português, sem falar do plugins para jQuery em português támbem. Acredite, desenvolver com um framework poupa e muito o seu tempo. Passando um pouco para a prática, você poderá desenvolver as três camadas (HTML, CSS e JS) de uma só vez, de forma fácil e rápida.

Não vou ficar tratando dos detalhes pois você pode encontrar os mesmos visitando o site do Linha Framework. Recomendo que baixem inicialmente a versão para desenvolvimento, pois contém demonstrações dos grids, plugins, enfim…é mais completo e melhor para iniciantes.

Fugindo um pouco do foco

Resolvi desenvolver este framework quando estava diante de um projeto mais complexo, ai já me empolguei e hoje está como você pode ver ai (no Github é mais atualizado ). Não espero rebecer os “meus parabéns” (além do mais que eu não criei este framework pensando nisso…) , pois creio que há muito a ser melhorado, e pra isso conto com a ajuda da comunidade brasileira. Se quiser críticar, seja bem vindo, mais faça um crítica conclusiva e objetiva.

Como já disse, é pra comunidade brasileira (quem sabe a gente não conquista o mundo, ashhausdha), pois a comunidade brasileira “ta fraca”…

É isso, se desejar teste o framework e crie a sua própia opinião, pra mim é uma mão na roda bem grande, mais pra você, já é outra conversa. As novidades talvez serão postadas aqui, ou quem sabe eu crio um blog só pra ele. De qualquer forma eu vou trazer alguns tutoriais e screencasts para ajudar quem deseja usar.

Quero deixar bem claro que é um framework open souce e eu não gostaria de desenvolver sozinho, se você tem amplos conhecimentos em front-end e quêr ajudar no desenvolvimento, ou fazendo tutoriais, melhorar a documentação, ou seja lá o que for, saiba que seu esforço é de grande importância.

Visite http://www.linhaframework.com, baixe e use a vontade. Aproveite e divulgue também em sua rede social.

Antes de terminar este post, quero dizer também que estou reformulando meu site já usando o linha framework…ta ficando bunitu

Até a próxima.

A seguir vou listar os post anteriores a este:
Novas funções(functions) do WordPress 2.8
Novas funções(functions) do WordPress 2.8 – Parte 2

automatic_feed_links()

Função adicionada na versão 2.8. Consiste básicamente em gerar ou não o Feed RSS no template, ou seja, se ao usar este template vai ter o não o feed RSS:

automatic_feed_links(false);//sem saida rss
automatic_feed_links();//com saida rss...o mesmo que true

Por padrão ela está ativada. Caso você deseje desativar a geração automática do feed RSS edite o arquivo functions.php e adicione esta função ou edite se ela já estiver presente.

comments_open()

Função usada para checar se os comentários para o post estão abertos ou não. Retorna true ou false:

if(comments_open()){
//Faz isso
}else{
//Faz outro isso 
}

Obviamente esta função é usada no arquivo single.php e/ou comments.php

pings_open()

Esta é bem parecida com a função commenst_open()…esta função checa se os pings estão abilitados no post em questão. Retorna true ou false:

if(pings_open()){
//Faz isso
}else{
//Faz outro isso 
}

é usada no arquivo single.php.

the_modified_author()

Algumas vezes um autor desenvolve um post mais ele precisa de muitas alterações…devido a essas alteração pode ser interressante atribuir a autoria do post ao administrador que realizou estas alterações (sacanagem ein, rsrs). Pois bem esta função faz exatamente isto. Geralmente você usaria a seguinte função para exibir o nome do autor:

Este post foi escrito por <?php the_author(); ?>

Agora com esta nova função para fazer a “sacanagem” citada acima, rsrs você irá usar:

Este post foi escrito por <?php the_modified_author(); ?>

Se ninguém alterou o post o autor exibido será o autor original do post

Existem muitas funções novas que ainda não falei aqui, mas, para o post não ficar grande e cansativo veja as principais alterações nesta página.

WordPress 2.9

Como vocês já devem ter percebido neste post e nos posts anteriores eu só falei de funções que se aplicam ao tema/template. Agora não será diferente. Para não ficar só no tema recomendo que vejam este video do inexorável tratando das novidades do wordpress 2.9.

Miniaturas do post

Até as versões anteriores para se conseguir uma miniatura do post era necessário usar um campo personalizado, o que para um usuário leigo torna difícil e complicado. A partir da versão 2.9 dos desenvolvedores tiveram a “brilhante” idéia de criar miniaturas para o post. Agora não temos mais que usar campos personalizados! Conversa fiada a parte vamos ver como funciona esta novidade:

Localizado na parte direita da página editar posts do wordpress há uma área com a miniatura do post. Se você provalvelmente não esta localizando esta área não se preocupe, vou dizer o porque.

Esta funcionalidade só está dispónivel em algum temas. Isso porque ela é ativada ou não através do template. Para ativar esta função é necessário editar o arquivo functions.php e adicionar o seguinte código:

add_theme_support( 'post-thumbnails' );

Pronto! Agora se você voltar ao admin já deverá ver esta nova área ao adicionar ou editar um post. O processo para adicionar a miniatura é o mesmo usado para adicionar imagens, a não se que em vez de clicar em inserir no post, você irar clicar no botão ao lado – Usar como miniatura :

Esquecendo um pouco a parte do admin vamos para o principal mesmo que a programação do template, nosso foco. Para exibr a miniatura usamos a seguinte função.

the_post_thumbnail()

As configurações básicas desta função são:

<?php the_post_thumbnail( $size, $attr ); ?>
//$size = Tamanho da imagem
//$attr = atributos para a imagem

Para o tamanho da imagem existem alguns valores ‘pré-definidos’ (você pode defini-los através do admin, no caminho Configurações » Media). Os valores são thumbnail, medium e large. Para valores personalizados utiliza um array. Exemplos:

the_post_thumbnail();            //Padrão / Original
the_post_thumbnail('thumbnail');       // Miniatura tamanho pequeno
the_post_thumbnail('medium');          // Miniatura tamanho médio
the_post_thumbnail('large');           // Miniatura tamanho grande?

the_post_thumbnail( array(100,100) );  // 100px por 100px
the_post_thumbnail( array(150,200) );  // 150px por 200px

Os atributos são definidos em uma array, são atributos padrões do HTML:

//Imagem com 60x60 pixels e classe borda-azul
the_post_thumbnail(array(60,60), array('class' => 'borda-azul'));

//Imagem com o titulo(alt) personalizado
the_post_thumbnail(array(60,60), array('alt' => 'Minha imagem'));

//Imagem com a classe borda-azul e titulo(alt) personalizado
the_post_thumbnail(array(60,60), array('alt' => 'Minha imagem', 'class' => 'borda-azul'));

O seu uso não se limita a um arquivo em si. a única dependência é que tenha o loop de um post:

//Exemplo de loop para um post
<?php while( have_posts() ) : the_post(); ?>
      <div class="entry">
            <h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
            <?php the_post_thumbnail('large'); ?>
            <?php the_content(); ?>
      </div>
<?php endif; ?>

Espero que tenham gostado! Até a próxima e não deixem de comentar!

Depois leia também

WordPress Versão 2.8
WordPress Versão 2.9
Most Notable Features in WordPress 2.9
Template Tags/the post thumbnail
Everything you need to know about WordPress 2.9’s post image feature,
The Ultimative Guide For the_post_thumbnail In WordPress 2.9

A maior novidade de todas!!!

Não…também não…esquece o Windows Seven, . Ta bom fiz drama demais com este subtitulo,  mas a melhor novidade na minha opinião é o lançamento do Ubuntu 9.10 (http://www.ubuntu.com/). que saiu ONTEM.

Recheado de novidades inclusive cloud storage (ubuntu one) esta versão do ubuntu vai dar o que falar.

Sobre o boot, alguns falam que o boot está bem parecido com o do Windows Seven, observe:

Realmente é parecido, mais o boot do ubuntu ficou bem mais legal . Pessoalmente eu amei esta nova versão e dou mais detaque para o visual que foi “reformulado” e ficou simplesmente lindo. Palmas para os desenvolvedores do ubuntu .

Pra quem quiser saber mais sobre a versão 9.10 do ubuntu eis alguns artigos que vão lhe ajudar:

Primeiras Consideração Sobre o Ubuntu 9.10 Karmic Koala Beta – Gizmod

Ubuntu 9.10 (Karmic Koala) Final – PPware

Ubuntu 9.10 Alpha 4 Vs Windows 7 RC - TechNow

Nunca um Koala foi tão esperado – Ubuntu SP

Site do Mês

Deixando um pouco de lado os Sistemas Operacionais confira alguns site que se destacaram e que acabaram de sair do forno ( ‘tá quentin’, faz nem um mês que nasceu ^^):

WoodsWoodsWoods http://www.woodswoodswoods.com

Logo Cranium http://www.logocranium.com/

Atlantis http://atlantis.com

Tutoriais do Mês

Quem não abre mão de um bom tutorial irá adorar este tutorial desenvolvido pela Nettust+(http://net.tutsplus.com/) . Aprenda simplesmente a criar um relógio ANIMADO com mooltools e um pouco de técnica:

Fora este belissimo tutorial, vamos para mais uma pequena lista de tutoriais:

Slider com histórico estilo Google Wave – Tutorialzine

Como criar texto em 3D no photoshop – Six Revisions

O mitério da propriedade float do CSS – Smashing Magazine

Deletando dados multiplos em PHP – In the Woods

Introdução ao HTML 5 - Pinceladas Web

Navegação Semântica com HTML 5 – Blog do Majour

Programa do Mês

Para esta categoria a novidade que trago é de maior interresse para designers e fotógrafos…sim, é a versão beta do Lightroom 3 que está disponível para download diretamente pelo site da adobe.
Quem quiser baixar aqui vai o link(http://labs.adobe.com/technologies/lightroom3/) .

Notícias do Mês

E pra acabar vários links de artigos que viraram notícias este mês e merecem destaque:

O novo Orkut – Meio bit

Keychest: a aposta da Disney e da Apple para combater a pirataria e aposentar os DVDs – Baixaki

Preços do Windows 7 no Brasil – Guia do PC

10 razões porque o Windows 7 pode fracassar – Guanabara.info

Joomla! 1.6 Alpha 2 Lançado! – Pé vermelho

Espero que tenha gostado e até a próxima…

Já postei este tutorial uma vez (aqui) mais este estava com alguns “bugs” e era restrito somente ao wordpress, então hoje decidi fazer este post sobre favicons, beneficios e como inserir favicons que funcione no IE(Internet Explorer) e em todos ou outros navegadores vai ser bem completinho:

O que é favicon?

Favicon nada mais é do que aquelas pequenas imagens que aparecem no navegador ao lado do endereço do site. Mais para maiores e melhores detalhes veja a descrição do Winkipédia:

Favicons (palavra derivada de favorite (favorito) e icon (ícone)) são pequenas imagens no formato *.ico com de cerca de 16×16 pixels que ficam guardados em um site para visualização pelo navegador. Em alguns navegadores como Internet Explorer até a versão 6, só exibem os favicons quando um site é adicionado aos favoritos. Neste caso, apenas no menu correspondente aos favoritos pode-se encontrar a imagem. Em outros navegadores como Firefox, Opera e Internet Explorer 7⁽⁺⁾, os favicons podem ser encontrados também nas abas e na barra de endereço.

Os favicons também tem teor de acessibilidade pois ajudam um usuário comum a identificar uma página quando ela está exibida em uma lista ou em uma barra de abas. Visando isto, muitos favicons são imagens simplificadas do logotipo da marca que representam.

Na ausência de um favicon, os navegadores exibem seu próprio ícone ou um ícone padrão como uma folha em branco.

Beneficios

Alguns beneficios que podemos conquistar com o uso de uma favicon são os listados abaixo:

• É otimo para marcar seu site tornando a localização deste mais fácil e de brinde tem até um destaque a mais ;
• Seu site vai ganhar uma aparência mais profissional e exclusiva que pode levar a mais links para seu site melhorando a parte do SEO (aqui já entra PR).

Preparando o terreno

Como tudo o que vamos fazer tem um requisito este não deixa de ser diferente. Para este processo precisamo de uma imagem no formato .ico com 16×16 pixels que pode ser feita usando o photoshop ou fireworks ou o seu programa de preferência. Para o processo que explicarei agora recomendo que faça a imagem em um formato grande uns 100×100 pixels deve ser o suficiente.

Com a imagem em mãos acesse este link e faça o upload de sua imagem, não precisa mudar nada, mais se quiser se aventurar fique a vontade…. Observe que logo abaixo você terá um preview de sua logo, algo parecido com isso:

Observe que há ainda algumas partes que ficaram imperfeitas…para isso temos um pouco acima deste preview um editor de favicons. Ajuste certinho sua favicon e faça o download.

Se você não quer fazer uma favicon, no mesmo site da www.favicon.cc há varias favicons grátis para download.

Agora começa a brincadeira…

Com a favicon definida vamos partir pra o upload e a programação que tambem é bem fácil. Upe sua imagem no local que deseja, recomendo que seja na pasta raiz de seu site ou se você usa o WordPress, Joomla ou Magento veremos o processo logo mais.

Como inserir uma favicon que funcione no Internet Explorer

Um do maiores problemas não só com favicon mais com tudo o que vamos fazer é bendito IE. Graças a Deus até para o IE temos uma solução…o principal problema é que  o IE “não consegue entender” que uma favicon no formato png ou gif é realmente um favicon,  por isso que mais acima ja fizemos o processo para deixa no formato .icon

Para o código temos que ter 2 linhas:

<link rel="shortcut icon" href="http://www.mateussouza.com/favicon.ico" />
<link rel="icon" href="http://www.mateussouza.com/favicon.ico" type="image/x-icon" />

Porque 2 linhas? elas fazem exatamente a mesma coisa mais como dizem uma é para o Internet Explorer e a outra é para o Firefox(firefox aqui se refere aos demais navegadores).  Copie e cole este código antes de fechar a tag <head>(</head), altere o caminho (href) para o caminho correto de sua favicon, salve o arquivo, teste e veja funcionando.

Como inserir favicon no WordPress

Não tem segredo:

Primeiramente Salve a favicon na pasta do seu tema.ex:
../wp-content/themes/seutema/

Agora temos que editar o arquivo header.php do tema que está em uso :

<link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>/favicon.ico" />
<link rel="icon" href="<?php bloginfo('template_directory'); ?>/favicon.ico" type="image/x-icon" />

Este código em php pegara o caminho do template e incluira no href, produzirá algo semelhante a isto:

<link rel="shortcut icon" href="http://www.mateussouza.com/wp-content/themes/mateussouza/favicon.ico" />
<link rel="icon" href="http://www.mateussouza.com/wp-content/themes/mateussouza/favicon.ico" type="image/x-icon" />

Agora salve, e faça o upload novamente para o seu servidor se você não editou diretamente. Pronto.

Como Inserir ou alterar a favicon do Joomla

Para o Joomla o processo é bem parecido. Faça o upload na pasta de seu tema ../templates/seutema/ e cole o código a seguir no arquivo index.php:

<link rel="shortcut icon" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/favicon.ico" />
<link rel="icon" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/favicon.ico" type="image/x-icon" />

Observe se já não existe um código parecido, se tiver apenas teste, se já estiver com a favicon certa nem é necessário editar o arquivo.

Obs. Alguns site falam que é necessário fazer o upload da favicon na pasta imagens também…creio que este processo seja necessário para a versão 1.0 do Joomla. Por via das dúvidas recomendo que upe sua favicon lá também.

Como Inserir ou alterar a favicon de sua loja Magento

E pra acabar mais não menos importante vamos para o processo em um loja Magento. Aqui o processo é bem mais simples apenas faça o upload para a pasta raiz de sua loja e também para a pasta de seu template. Observe os caminhos:

Se você usa o template default, sua favicon está localizada em:
/skin/frontend/default/default/favicon.ico

Se você usa um template personalizado sua favicon está localizada emt:
/skin/frontend/default/SEU_ TEMA/favicon.ico

Teste e confira se não deu nada de errado.

Considerações Finais

É possivel que já tenha uma favicon nos diretorios listados neste tutorial, se houver apenas substitua por sua nova favicon.

Pode acontecer de sua favicon não ser alterada no mesmo momento da alteração devido ao cache de seu website. Limpe-o ou espere algum tempo e teste novamente. Uns F5 também ajuda(na verdade é Ctrl+F5 ).

Até a próxima.

Aeeeeeeeeeeeeeeeee galera, rsrs.  Finalmente consegui um tempinho pra posta(to no curso).  A partir de agora trarei posts com os links do mês, o que eu achei interressante, tutoriais, matérias, programas, sites enfim o que for revelante e eu ver vai estar aqui, hehe.

Site do Mês

http://www.ea.com/Novo site refinado da ea-games. Um ótimo trabalho desenvolvido pelo pessoal da F-i…realmente estão de parabens não só nesse como em todos os outros projetos.

Outros links:
http://www.kinder-aktuell.de/
http://crazylovecampaign.com/
http://designerscouch.org/

Tutorial do Mês

Efeito Hover Realista com Jquery

Tutorial que ensina a criar um efeito realista de efeito hover com reflexo ou sombra. É mais um tutorial que está tirando o flash de cena através do jQuery. Dêem uma conferida realmente ficou bem realista.

outros links:
Escala de cinza em hover com jQuery e CSS
Navegação animada com jQuery
Filtragem rápida e fácil com jQuery
Animando elementos com jQuery e Easing

Podcast do Mês

Guanacast
Podcast bem divertido e descontraido. Começei a ouvir este mes ainda apesar dele “estar no ar” desde 2007.  Para ser mais especifico o podcast fala sobre principalmente tecnologia. Se tiverem o itunes ja assine o feed, hehe. Se não tiveres itunes não tem problema, eu lhes apresento. E como eles dizem: Comprem no submarino (lá e aqui também)

Programa do Mês

Itunes 9

Este mês a apple lançou a nova versão do itunes…Depois que intelei o itunes no computador nunca mais usei outro. Não vou falar sobre as novidades mais vou dizer o porque da minha escolha: Primeiramente é por ter os podcasts e screencasts, gosto tambem da organização que o itunes faz, enfim musica pra mim é itunes. Quando eu comprar meu iphone já é mais um ponto pra mim, hehe.

Conclusão

Por esse mês ja basta .Foi um post rapidinho, com o tempo irei aperfeiçoar mais. Tivemos muitas novidades e só fica desatualizado quem quê…espero que aproveitem e dêem pelo menos uma olhada nesses links ele merecem.

Alterando ou Adicionando o logo em Sua Loja Magento

Para isto podemos usar 3 formatos de imagens, que são os mais usados, JPEG, GIF e PNG, recomendo o PNG mais fica a sua escolha.

Usando GIF
Se usarmos o gif o processo é mais simples, basta fazer o upload e subistituir a imagem que esta localizada em skin/frontend/default/default/images/logo.gif usando o FTP.

Usando PNG e JPG
O primeiro passo é upar a imagem em skin/frontend/default/default/images/. Logo após acessamos o admin do magento http://www.oenderecodasualoja.com.br/admin e seguimos este caminho: Sistema » Configurações, selecione o link de menu Design (está a esquerda da página) e vá mais abaixo na parte Header do acorddion como na figura abaixo:

Clique na imagem para ver em tamanho original

Para o segundo passo, devemos colocar o nome da imagem que upamos no campo Logo Image Src; recomendo que renomeie com o nome de sua loja para os motores de busca, é mais questão de SEO.

Considerações Finais
Este pequeno tutorial foi desenvolvido tendo em mente o template padrão do Magento, por isso a localização skin/frontend/default/default/images/, se você usa o template blue que também já vem no magento o caminho é o mesmo: skin/frontend/default/blue/images/. Uma maneira de saber o caminho da logo é clicar com o botão auxiliar na foto e escolher a opção exibir imagem ou exibir imagem de fundo.

Até a próxima