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 60×60 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 :P.

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 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=”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” />

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=”/templates//favicon.ico” />
<link rel=”icon” href=”/templates//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

http://www.bestwebframeworks.com/

É o site precisávamos…uma vez selecionado a linguagem, será exibida uma tabela com pelo menos alguns pontos básicos:

• Licença;
• Requisitos;
• Recursos;
• Compatibilidade.

Quem tiver dúvidas creio que ao visitar este site terá mais certeza de qual framework precisa. Para não ficar só na dica eu vou falar os melhores na minha opinião:

PHP

O framework que mais me agrada é o Codeigniter. Lembro de quando eu nem sabia PHP e fui me meter com ele sem nem saber pra que servia, rsrs. Mesmo não sabendo nada eu fui capaz de fazer algumas coisas e recomendo. Com um pouco mais de detalhes, a documentação do Codeigniter é bem completa, simples e fácil e tem até em português (http://www.codeigniter.com.br/manual/index.html),  sua instalação é a mais rápida que já vi e o desenvolvimento é: PHP, não é necessário aprender uma nova “linguagem” como no Zend Framework enfim, na minha opinião não tem melhor.

Site Oficial Codeigniter
Codeigniter Brasil
Documentação Codeigniter em Português

Ruby

Não sou nenhum programador Ruby mais sei que o melhor e mais conhecido framework é o Ruby on Rails.  Este frameworks é usado em grandes sites como Twitter, GitHub , Basecamp, BlogsBlogs entre outros. Nem vou falar mais nada apenas visitem o site http://www.rubyonrails.pro.br/, se empolgue e tire as suas próprias conclusões.

Site Oficial Ruby on Rails (inglês)
Documentação Ruby

Javascript – JS

Se você é um leitor do meu blog já deve saber que jQuery é o frameworks que uso para programar javascript. Mesmo depois de tanto tempo usando jQuery ainda me surpreendo com a facilidade de se programar com essa biblioteca. Para você que ainda não conhece o jQuery recomendo que leia o post Introdução ao jQuery e veja também os tutorias em sua categoria.

Site Oficial jQuery
Documentação jQuery

CSS

E por último para CSS recomendo o Grid 960. O GRID 960 é uma ferramenta simples que ajuda na padronização de layouts para web. Possui arquivos (grids) para os mais famosos programas usados para criação de layouts (Photoshop, Illustrator, Fireworks, Indesign, etc…). Seu desenvolvimento é bem fácil também e ajuda bastante no desenvolvimento do layout em CSS.

Site Oficial Grid 960
Download do Grid 960

Em breve se possível estarei trazendo mais novidades sobre cada um destes frameworks e tutoriais para aprendizado. Até a próxima.

Se você ainda não leu o primeiro post desta série, eis ai o link:

Parte 1

is_page ou is_page_or_sub(); function

Vamos iventar uma situação, talvez eu acerte na mosca o que você precisa ou então passe raspando, rsrs. Em alguns projetos é necessário um estilo diferenciado ou uma função especial para uma determinada página. Peguemos como exemplo uma página de portfólio. Até o wordpress 2.7 você declararia o seguinte código em php para criar esta função especial ou seja lá o que for:

<?php if(is_page(’portfolio’)) : ?>
//Se for apareça, ou faça isto…
<?php else :?>
//E se caso eu usar o else…Se não(else), apareça ou faça isto…
<?php endif; ?>

Para aqueles que ainda nem conhecem a função is_page(). recomendo que dêem uma lida na documentação do wordpress, mais eu vou explicar rapidamente. Esta função irá retornar valores booleanos (verdadeiro ou falso / true ou false). se for verdadeiro será executado a sua função que você estabelecer, caso seja falso não executará ou executará uma função diferente. Alem de usar o nome de página podemos usar o ID, o slug da página ou todos de uma vez. Observe:

<?php is_page(42);
// Usando o ID.

is_page(’Contato’);
// Usando o nome ou titulo da página.

is_page(’about-me’);
// usando o slug da página.

is_page(array(42,’about-me’,'Contact’));
// Ou usando todos….é útil para uma função que vai em mais de uma página.
 ?>

Agora voltando a situação anterior:
-Rá, tem um probleminha…se esta página for uma sub_pagina da página Portfólio?. Até então você teria que fazer uma gambiarra, ou um monte de if, mais fique feliz, seus problemas acabaram :). em vez de usar somente is_page use is_page_or_sub.

<?php if(is_page_or_sub(’portfolio’)) : ?>
//Se for apareça, ou faça isto…
<?php else :?>
//E se caso eu usar o else…Se não(else), apareça ou faça isto…
<?php endif; ?>

Para uma explicação mais “técnica”, a função irá checar se a página tal ou uma sub_pagina (child ) da pagina tal existe, se existir ele executa o código.
Espero que tenham entendido, qualquer dúvida pode perguntar, só fazer um comentário no post.

Depois leia também:

Documentação do Wordpress – Função Is_page
Documentação do Wordpress – Lista de Funções

Até a próxima.

Já faz algum tempo que o CSS3 foi lançando e eu ainda não falei nada sobre ele. Pois bem, vamos dar uma introdução ao CSS3. Antes de mais nada quero deixar bem claro que nem todos os navegadores tem suporte ao CSS3, não preciso nem citar o IE6 né :). Aqui vale apenas citar os que possuem suporte: Firefox 3+, Safari 4+ e Opera 9.5+. Vamos iniciar com a história do CSS:

A História do CSS

O Primeiro código CSS foi proposto por um cara chamado Hakon Lie em Outubro de 1994. Logo depois, em 1995, foi criado um workshop e com isso surgiu a W3C. Um ano se passou e o CSS1 começou a ser recomendado, exatamente em 1997. Muitos trabalhos e estudos foram feitos em cima do CSS1 e em meados de 1998, mas precisamente em Maio, o CSS2 tornou-se uma linguagem de marcação recomendada pela W3C. Desde então, apenas esboços foram apresentados como módulos em Junho de 1999(CSS3).

Com essa pequena intro, já percebe-se que o CSS3 vem sendo planejado a muito tempo. Chega de “papo furado” e vamos prosseguir.

Novidade do CCS3

Novidades são muitas…o melhor delas é que são úteis, hehe :). Veja a lista das principais propriedades que são novidades, com o surgimento do CSS3:

Bordas

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

Fundos

• background-origin
• background-clip
• background-size
• fazer camadas com múltiplas imagens de fundo

Cor

• cores HSL
• cores HSLA
• cores RGBA
• Opacidade

Texto

• text-shadow
• text-overflow
• Ruptura de palavras longas

Interface

• box-sizing
• resize
• outline
• nav-top, nav-right, nav-bottom, nav-left

Seletores

• Seletores por atributos

Modelo de caixa básico

• overflow-x, overflow-y

Outros

• media queries
• criação de múltiplas colunas de texto
• propriedades orientadas a discurso ou leitura automática de páginas web
• Web Fonts

Em futuros posts falarei sobre estas propriedades e também farei tutoriais (o que não pode faltar ^^). Por ordem de importância, vamos falar hoje sobre os seletores do CSS3.

Seletores CSS3

No geral, os seletores do CSS3 são estes (obs. E - letra E – é o seletor. Ex: p[atributo*="string"]):

• E[atributo*="string"]
• E[atributo$="string"]
• E[atributo^="string"]
• E~F
• :root
• :last-child
• :only-child
• :not ( )
• :empty
• :target
• :enabled
• :disabled
• :checked

Quem conhece bem o jQuery, perceberá que ele tem alguns seletores igualzinho ao CSS3, isto ocorre porque o jQuery utiliza os seletores do CSS3 também.

E[atributo*="string"]

Funciona da seguinte maneira, imagine que eu tenho uma div alinhada a esquerda:

<div align=’left’></div>

Podemos estilizar esta div apenas acessando a sua propriedade, que neste caso é align=”left”. Observe que o valor é exatamente igual – left = left.

div[align*=left] {
} 

Veja o exemplo

Semelhantemente os seletores E[atributo$="string"] e E[atributo^="string"], funcionam da mesma forma, mais a diferença entre eles é, se tiver o $(cifrão) deverá terminar com o valor especificado e se tiver o ^(acento circunflexo) deverá iniciar com o valor especificado.

E~F

Este seletor faz uma combinação de dois seletores para a estilização. Exemplo, um h1 e p:

<h1></h1>
<p></p>

e o css:

h1 ~ p {
}

Neste caso o que será estilizado com css é o p. O segredo para o domínio desta seleção é a ordem dos elementos, se neste exemplo o h1 fosse depois do p o css não resultaria em nada. Observe o que estou dizendo:

<p></p>
<h1></h1>

Veja o exemplo

:root

Como o próprio nome diz, ele irá pegar o 1º elemento da página, a tag <html>. Podemos usar um css mais avançado e criar CSSs da seguinte maneira:

:root div{
}

Veja o exemplo

:last-child, :only-child e :not()

Para não cansar a leitura, vamos a uma explicação rápida. :last-child irá pegar somente o último elemento de uma lista por exemplo (

):

HTML

<ul>
    	<li>Texto 1</li>
    	<li>Texto 2</li>
    	<li>Texto 3</li>
    	<li>Eu sou o ultimo texto desta lista</li>
</ul>

CSS

li:last-child{
    	background: #ddd;
    	display: block;
}

Veja o exemplo

:only-child, como o própio nome já diz, (only = único) irá buscar o elemento que é único, para exemplificar usei mais uma vez uma lista:

HTML

<ul>
    	<li>Texto 1</li>
    	<li>Texto 2
    	    	<ul>
    	    	    	<li>Só tem um LI</li>
    	    	</ul>
    	</li>
    	<li>Texto 3</li>
    	<li>Texto 4</li>
 </ul>

CSS

li:only-child {
    	background: #ddd;
    	display: block;
}

Veja o exemplo

:not, irá “bloquear” a estilização com CSS ao elemento que tiver uma certa #id ou .classe . Neste exemplo abaixo, “bloquearemos” a classe .vermelho:

HTML

<ul id=”dois”>
    		<li>Texto 1</li>
		<li class=”vermelho”>Texto 2</li>
		<li>Texto 3</li>
		<li>Texto 4</li>
		<li>Texto 3</li>
		<li>Texto 4</li>
		<li class=”vermelho”>Texto 3</li>
		<li>Texto 4</li>
</ul>

CSS

    	li:not(.vermelho){
    	background: #ddd;
}

Veja o exemplo

:empty

É útil para indicar div que estão em branco (empty = em branco), ou então esconde-las, como no código abaixo:

div.box:empty {
    	display: none;
}

:target

essa eu axei interressante…imagine que você tenha links que puxar o id(#) de uma parte do site, por exemplo este link http://www.mateussouza.com/novidades/novas-funcoesfunctions-do-wordpress-2-8#comments você percebe que no final dele existe #comments e é usando esse atributo que vamos estilizá-lo:

h2:target {
    	background:#F2EBD6;
}

:enabled, :disabled e :checked

Só se aplica a elementos do html que tenham a opção de abrir(enabled) e fechar(disabled) ou checar(checkbox), como por exemplo formulários.  Podemos estilizar como destaque alguns radios que estão desabilidatos.

<input type=”text” disabled=”true” />

O css seria:

input:disabled {
    	border:1px dotted #999;
    	background:#F2F2F2;
 }

o mesmo se aplica ao enabled, mais temos que somente alterar :disabled por :enabled. Ex:

input:enabled {
    	border:1px dotted #999;
    	background: #F2F2F2;
 }

E para finalizar, com o atributo :checked podemos colocar os checkbox’s que estão checados mais a frente:

<input type=”checkbox” checked=”checked” />

CSS:

input:checked {
    	margin-left: 20px;
}

Veja o exemplo

Depois leia também o post do Smashing Magazine que está mais amplo…
Taming Advanced CSS Selectors

Até a próxima.

]]> http://www.mateussouza.com/css/iniciando-com-css3/feed 1 http://www.mateussouza.com/novidades/novas-funcoesfunctions-do-wordpress-2-8 http://www.mateussouza.com/novidades/novas-funcoesfunctions-do-wordpress-2-8#comments Thu, 23 Jul 2009 19:21:34 +0000 admin http://mateussouza.com/?p=562 Hoje vou trazer um pouquinho das novidades do wordpress 2.8, mais antes disso quero dar a minha avaliação sobre essa nova versão:
Realmente melhorou muito, algumas novidades são bastante úteis como,  melhor gerenciamento de tags, adição de novos temas sem necesisdade de ftp (basta ter o zip, fazer o upload e depois é só alegria) e muito mais. Pra mim a função de maior revelância foi a parte de plugins, buscar e instalar novos plugins rapidamente realmente merece destaque.Éé claro que isso também é possivel com templates/temas, mais convenhamos,  não vou trocar o template toda hora…com o plugins é mais bacana pois podemos incrementar nosso website.
Pontos que deixaram a desejar também há, vou falar somente um. Quando você arasta um widgte para a sidebar ele automaticamente salva mais não exibe nenhum alerta, o mesmo acontece quando se altera um widget. De qualquer modo parabéns a equipe do wordpress…

Voltando para as novas função do wordpress 2.8 mais especificamente para o desenvolvimento de templates, existem algumas functions bacanas e que vem a calhar, dentre as que eu conheço vou falar sobre:

1. body_class(); Function
2. is_page ou is_page_or_sub(); Function
3. is_category_or_sub Function
   
4. Talvez mais…

Vai ser muita coisa então vou dividir em partes pra não ficar cansativo. Hoje vamos falar sobre a function body_class();.

Function body_class();.

Funciona basicamente assim, cada pagina tera uma classe que a identifica, exemplo:

<body class=”single postid-64″>

ou seja, uma pagina com 2 classe para maior manipulação. Mais pra que isso você pode me perguntar…é mais para personalização com css, neste exemplo podemos criar um fundo(background) diferente para as paginas de posts (single) ou então somente para o post de numero 64.
outro exemplo desta função seria para usuarios registrados, ficaria algo mais ou menos assim:

<body class=”single postid-64 logged-in”>

confira a lista completa de possibilidades:

• rtl
• home
• blog
• archive
• date
• search
• paged
• attachment
• error404
• single postid-(id)
• attachmentid-(id)
• attachment-(mime-type)
• author
• author-(user_nicename)
• category
• category-(slug)
• tag
• tag-(slug)
• page
• page-parent
• page-child parent-pageid-(id)
• page-template page-template-(template file name)
• search-results
• search-no-results
• logged-in
• paged-(page number)
• single-paged-(page number)
• page-paged-(page number)
• category-paged-(page number)
• tag-paged-(page number)
• date-paged-(page number)
• author-paged-(page number)
• search-paged-(page number)

Como usar esta função?

Antes de mais nada, precisamos localizar a tag body em nosso template, geralmente fica no arquivo header.php, feito isso subistitua <body> por:

<body <?php body_class(); ?>>

salve o arquivo e pronto, nossa função ja está funcionando.

Usando estilos dinâmicos – CSS

Geralmente quando vamos fazer o css de um website fazemos assim:

body{
background: #dddddd;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
color: #1c1d21;}

Agora considere o seguinte, supondo que o a classe gerada seja uma página de post, logo será .single. O que temos que fazer:

body.single{
background: #aaaaaa;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
color: #1c1d21;
}

Neste exemplo eu somente mudei o fundo de #dddddd para #aaaaaa…lembrando que o backgroud com a cor #aaaaaa aparecerá somente nas paginas de post. Pegou o espírito da coisa? fácil não?

Espero que tenham entendido, qualquer dúvida é só perguntar, até a próxima.

]]> http://www.mateussouza.com/novidades/novas-funcoesfunctions-do-wordpress-2-8/feed 2 http://www.mateussouza.com/tudo/vaga-para-analista-seo http://www.mateussouza.com/tudo/vaga-para-analista-seo#comments Thu, 23 Jul 2009 19:14:44 +0000 admin http://www.mateussouza.com/?p=569
Hoje o pessoal da 5A Consultoria me enviou um e-mail para uma vaga de Analista SEO, como eu não sou bom em descrever isso vou postar o que eles me mandaram:

Boa tarde Mateus.

tenho uma vaga de analista de SEO em aberto e queria saber de você tem interesse nessa vaga. è uma vaga de contrato imediato, caso voê queira e se encaixe no perfil. A 5A atua fortemente no mercado Corporativo de TI, com destaque em Terceirização de Profissionais de Desenvolvimento, Gestão de Projetos e Soluções em Sistemas.

Estamos selecionando profissionais para empresa de grande porte localizada na rigião da Av. Brigadeiro Faria Lima. A vaga exige conhecimentos e experiencia em:

- SEO
- Usabilidade
- W3C
- WEB Analystics
- E-Commerce

Irá atuar com manutenção e desenvolvimento.
Contratação PJ -
Salario à combinar

Eu conversei com o responsável e disse que iria postar aqui no blog. É uma oportunidade boa pra que tem conhecimento na área, caso algum se interresse mande um e-mail para samuel.salvador@5A.com.br com o seu curriculo atualizado mais telefone para contato. é isso, espero que tenha ajudado tanto eles quanto você que está lendo este post.

Até a próxima.

]]> http://www.mateussouza.com/tudo/vaga-para-analista-seo/feed 0