Já vi em muitos código fontes, funções um tanto que imensas para realizar a tarefa de conversão de tipos – arrays para objetos ou objetos para arrays. Mais o que muita gente não sabe é que existe um atalho para isto, simples e rápido. Vejamos um exemplo:

$dados = array('nome' =>'Mateus', 'sexo'=>'Masculino');
echo $dados['nome']; //Resultado: Mateus
echo $dados->nome; //Resultado: Erro

$dados = (object) $dados; //É aqui que tudo funciona...
echo $dados->nome; //Resultado: Mateus

Anteriormente tinhamos uma array – $dados -, que em um “passe de mágica” virou um objeto. Para converter um objeto em uma array o processo é bem simples também:

$array = (array) $objeto;

Também é possível formatar outros tipos, como string, integer ou float:

$numero = (float) $numero;
$boolean = (boolean) $boolean;
$string = (string) $string;
....

Tecnicamente falando, este processo é chamado de Type Casting, ou Tipo de Vazamento em português e como o proprio nome já diz, ele converte o modo de vazamento (ou distribuição) de um elemento. Para saber um pouco mais, veja no manual do PHP sobre Type Casting.

Se você não sabe o tipo do elemento, use a função var_dump ou a função para debug. Até mais.

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

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

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.

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.

Demonstação / Download dos Arquivos

1º passo – Chama a jQuery

Você que sempre acompanha o meu blog já deve estar se roendo porcausa dessa etapa né…mais calma lá, lembrem-se que tem sempre gente nova na area que ainda num sabe disso:

<script src="jquery-1.3.1.min.js" type="text/javascript"></script>

Como o jQuery está com a sua nova versão(1.3) vamos utilizá-la nesse exemplo.

2º Passo -  Escrevendo o script

<script type="text/javascript">
			function limitChars(texto, limite, info){
				var text = $('#'+texto).val();
				var textlength = text.length;

				if(textlength > limite)
				{
					$('#' + info).html('Você ultrapassou o limite de '+limite+' caracteres');
					$('#'+texto).val(text.subtr(0,limite));
					return false;
				}
				else
				{
					$('#' + info).html('Você ainda pode escrever mais '+ (limite - textlength) +' caracteres');
					return true;
				}
			}
			$(function(){
				$('#mensagem').keyup(function(){
					limitChars('mensagem', 20, 'info')
				})
			});
		</script>

Resumindo: criamos uma função com duas variáveis que exibe sim(if) ou não(else). Ou seja, se o usuário ultrapassar o número de caracteres estipulados (neste exemplo são 20 caracteres) o javascript retorna if dizendo que altrapassou o número máximo de caracteres. Se não o javascript retona else exibindo quantos caracteres o usuário ainda pode escrever….

3º passo – CSS e HTML
Não vamos dar ênfase a essa parte…pois são somente estilos aplicados a página:

CSS

<style type="text/css">
			body{
				background:#e8e8e8;
				font-family: Arial, Helvetica, sans-serif;
				color:#222;
			}
			a{
				color:#222;
				text-decoration: none;
			}
			#campo{
				background: #ffffff;
				margin:0 auto;
				width:500px;
				height:250px;
			}
			#titulo{
				height:32px;
				background: #ffffff url(tit.png) repeat-x;
				border: 1px solid #d07300;
			}
			h2{
				font-size:16px;
				font-weight:bold;
				text-align:center;
				color:#111;
				line-height:10px;
			}
			textarea{
				background: #ffffff url(bg.png)repeat-x;
				height:216px;
				width:489px;
				padding:5px;
				border-bottom: 1px solid #bdbcbd;
				border-left: 1px solid #bdbcbd;
				border-right: 1px solid #bdbcbd;
				border-top: none;
			}
			#info{
				font-size:12px;
				margin-top:5px;
				position:absolute;
				text-align:right;
				width:500px;
			}
		</style>

HTML
Note que foram criados duas IDs (mensagem e info) que foram usadas no javascript juntamente com o número máximo de caracteres:

<div id="campo">
	        <div id="titulo">
	        	<h2>Escreva a sua mensagem</h2>
	        </div>
			<form>
				<textarea name="mensagem" id="mensagem" ></textarea>

		</form>

		<span id="info">Não ultrapasse 20 caracteres</span>

		</div>

é isso…espero que tenham gostado.Se quiserem façam o download com o psd e tudo mais. Até a próxima.

Demonstação / Download dos Arquivos

Passo 1 – Chamar a biblioteca jQuery para o documento:

<script src="js/jquery.min.js" type="text/javascript"></script>

Passo 2 – insira o código abaixo logo após o anterior:

<script type="text/javascript">
$(document).ready(function(){
$(document).bind("contextmenu",function(e){
return false;
});
});
</script>

é so isso.salve a pagina e teste…

Resumindo…quando o usuario clica com o botão direito deveria aparecer o menu de contexto (contextmenu), mas o script executa a função return false, fazendo com que não apareça o menu…
Funcionalidade:
Este script funciona em todos os navegadores, excerto Opera

Até a próxima.

Intrudução
É comum haver confusões entre IDs e Classes, utilizados e necessários em XHTML, CSS e Javascript. Há muitos tutoriais na internet explicando alguns pontos básicos e algumas dicas, que não são o suficiente. Resultado: as dúvidas persistem e a diferença entre ID e Classe ainda não é “desvendada”. Vamos acaber com esse mitério de uma vez por todas…

IDs e classes são “anzóis”

Precisamos definir uma propriedade(estilos) para os elementos da pagina. Para isso, usamos e IDs e Classes.

Por exemplo:

<ul id="nav">

Isso dá a oportunidade de visar e aplicar especificamente as propriedades para esta lista, então há uma maneira de manipular esta lista exclusivamente em relação a outras listas não-ordenadas da página. Ou talvez tivéssemos uma seção na página que não possui uma tag relevante para signifcar, por exemplo, um rodapé, onde poderíamos fazer algo como:

<div id="footer">

Ou talvez tenhamos boxes na barra lateral para manter o conteúdo separado de alguma forma:

<ul class="sidebar-box">

Esses IDs e classes são os “anzóis” que precisamos fazer na marcação para colocarmos as mãos neles. O CSS obviamente precisa disso para que possa fazer seletores e montar folhas de estilos, mas outras linguagens web, como javascript, também dependem deles. Mas quais as diferenças entre IDs e classes?

IDs são únicos

• Cada elemento pode ter apenas um ID;
• Cada página pode ter apenas um elemento com aquele ID.

Quando se está aprendendo sobre isso, é comum ouvir que só se deve usar IDs uma vez, mas é possível usar uma classe várias vezes. Basicamente, isso entra num ouvido e sai no outro, porque soa mais como uma “regrinha” que algo realmente importante. Se você trata somente com HTML / CSS, isso pode acontecer com você, também, porque eles realmente não parecem fazer nada de diferente.

Atenção: seu código não vai passar pelo validador se você usar o mesmo ID em mais de um elemento. A validação deve ser importante para todos nós, de modo que, por si só, é algo muito importante. Adiante, mais razões pelas quais um ID deve ser único.

Classes não são únicas

• Você pode usar a mesma classe para vários elementos;
• Você pode usar várias classes para um mesmo elemento.

Qualquer informação de estilo que precise ser aplicada a múltiplos elementos em uma página deve ser feita com uma classe. Tomemos como uma exemplo uma página com vários “widgets“:

<div class="widget"></div>
<div class="widget"></div>
<div class="widget"></div>

Agora, é possível usar a mesma classe “widget” como gancho para aplicar o mesmo conjunto de estilos para cada um deles. Mas, e se for preciso ter um deles maior que os outros, mas continuar com um estilo que compartilhe dos outros atributos? É possível aplicar mais de uma classe a um elemento:

<div class="widget"></div>
<div class="widget big"></div>
<div class="widget"></div>

Não há necessidade de fazer e nomear uma nova classe aqui, apenas colocar o nome da nova classe no atributo class, juntamente com o nome da classe que já está lá. As diferentes classes são delimitadas por espaços e a maioria dos navegadores permite quaisquer números delas (na verdade, é mais como milhares, o que é muito mais do que realmente é preciso).

Não existem padrões de IDs e Classes em nenhum navegador

Colocar um nome de classe ou ID em um elemento, por padrão não faz nada a esse elemento.

Isso é algo que intriga quem é iniciante. Você está trabalhando em um site e descobre que a aplicação de uma classe com um nome em particular resolve um problema que você tem. Então você mexe em outro site, com o mesmo problema, e tenta corrigí-lo da mesma maneira, usando aquele mesmo nome de classe, pensando que o nome da classe, por si só, tem alguma propriedade mágica, apenas para descobrir que não funciona assim…

Classes e IDs não têm qualquer estilo por si mesmos. É preciso CSS para orientar e aplicar estilos.

Códigos de Barra e Números de Série

Talvez códigos de barra e números de série sejam uma boa analogia. Tome um iPod, numa loja. Na embalagem há um código de barras. Ele indica à loja que produto é esse; então, quando é escaneado, o código de barras informa exatamente que produto é aquele e quanto custa. É possível saber até sua cor e em qual lugar do armazém ele era mantido. Todos esses iPods têm exatamente o mesmo tipo de código de barras.

O iPod tem também um número de série que é absolutamente único em relação a qualquer outro iPod (ou outro dispositivo) em todo o mundo. O número de série não informa o preço. Poderia, mas para a loja que o vende esta não seria uma maneira eficaz de armazenar e utilizar essa informação. É muito mais fácil usar um código de barras porque se, por exemplo, o preço muda, é preciso apenas alterar o preço para aquele código de barras, e não para cada número serial do sistema.

Isso é muito parecido com IDs e Classes. Informações que são reusadas devem ser mantidas em uma classe e informações que são totalmente únicas devem ser mantidas em um ID.

IDs têm uma funcionalidade especial nos navegadores

Classes não tem funcionalidades especiais no browser, mas IDs têm um truque muito especial na manga: um “valor de hash” para URLs. Se você tiver um URL como http://seudominio.com#comments, o navegador vai tentar localizar o elemento com o id “comments” e vai automaticamente rolar a página até chegar nesse elemento.

É importante observar que o browser vai rolar a página até onde quer que o elemento esteja; então, se houver algo de especial, como uma DIV com barra de rolagem (propriedade CSS overflow com valor “auto” ou “scroll”), esta barra de rolagem vai ser deslocada – rolar para baixo -, também.

Esta é uma razão importante sobre o porquê é importante ter um ID absolutamente único. Com isso, o navegador sabe até quando rolar.

Elementos podem ter ambos, ID e Classes

Não é nada ruim você usa ambos, ID e classes em um único elemento. Na verdade, fazer isso na maioria das vezes é uma boa idéia. Tomemos como exemplo o padrão de marcação para item de lista de um comentário no WordPress:

<li id="comment-27299" class="item">

Tem uma classe que foi aplicada que talvez se queira usar para estilizar todos os comentários na página, mas também há um único valor de ID (dinamicamente gerado pelo WordPress). Com isso, é facilmente possível fazer um link diretamente a um comentário, em uma página, em especial.

CSS sem limites

Quanto ao CSS, não há nada que você possa fazer com um ID que não possa fazer com uma Classe e vice-versa. Às vezes, quando se está iniciando no estudo de CSS e se tem um problema, tenta-se alternar entre usar ID ou usar Classe. O CSS não se importa, faça o que quiser.

Javascript se importa

Aqueles que mexem com javascript provavelmente já estão mais em sintonia entre as diferenças entre as Classes e IDs. Javascript depende da existência de um elemento de página com ID único, ou então a comumente utilizada função getElementById não seria confiável. Aqueles acostumados com jQuery sabem o quão fácil é adicionar e remover classes de elementos de página. É uma função nativa no jQuery. Veja que tal função não existe para IDs. Não é responsabilidade do javascript manipular estes valores, porque ele causaria mais problemas que seria útil…

Se você não precisa deles, não os use

Como você pode ver, classes e IDs são muito importantes e nós os utilizamos todos os dias para estilizar páginas e manipular aquilo que é preciso. Entretanto, você deve usá-los com critério e semanticamente.

Isto significa evitar coisas do tipo:

<a href="http://css-tricks.com" class="link">CSS-Tricks.com</a>

Já sabemos: este elemento é um link, é um elemento âncora. Não há nada de especial aqui a ponto de ser preciso especificar uma classe, já que é possível aplicar o estilo na própria tag (”a”).

Evite este tipo de coisa, também:

<div id="coluna-direita">

O ID é corretamente utilizado aqui, já que, provavelmente, a página terá somente uma única coluna da direita, mas o nome é inadequado. Descreva o contexto do elemento, não onde está ou como se parece. Um ID “barra-lateral” seria melhor.mais isso não tem tanta importacia, eu prego o seguinte: se você entende o que fez e ta certo, então faça a sua maneira…

Ta bom né, agora vamos aos creditos:
Eu é claro, e tambem ao site CSS tricks de onde foi retirado parte desse post…espero que tenham gostado e entendido (ficou meio técnico o post).

Até a proxima.