Gerador de CSS em Cascata

Antes de falar do gerador, vou falar um pouco da construção do CSS de forma organizada e sugestiva.

 

  • Introdução

Cada programador tem sua forma de organizar seu código e seus troques adquiridos com a experiência.

Com o CSS temos que tomar alguns cuidados para que um estilo não conflite onde não deve.

Veja o código abaixo:


<body>

	<div id="topo">
		<ul class="menu">
			<li><a href="#">Item 1</a></li>
			<li><a href="#">Item 2</a></li>
			<li><a href="#">Item 3</a></li>
			<li><a href="#">Item 4</a></li>
		</ul>
	</div>
	
	<div id="conteudo">
	
		<div class="coluna-esquerda">
			<ul class="categorias">
				<li><a href="#">Categoria 1</a></li>
				<li><a href="#">Categoria 2</a></li>
				<li><a href="#">Categoria 3</a></li>
				<li><a href="#">Categoria 4</a></li>
			</ul>
		</div>
		
		<div class="coluna-direita">
			...
		</div>
	
	</div>
	
	<div id="rodape">
		<ul class="menu">
			<li><a href="#">Item 1</a></li>
			<li><a href="#">Item 2</a></li>
			<li><a href="#">Item 3</a></li>
			<li><a href="#">Item 4</a></li>
		</ul>
		<div class="direitos">Todos os direitos reservados</div>
	</div>

</body>


Note que temos dois menus no site, um no topo e outro no rodapé.

Podemos criar um estilo genérico com o nome .menu{} que afetará os dois e podemos criar estilos específicos como #topo .menu{} e #rodape .menu{}

A vantagem de nunca utilizar estilos genéricos para itens visuais é que uma hora podemos utilizar aquela classe em outra página e termos uma surpresa.

Então para evitarmos ficar criando .menu2{}, .menu3{}, .menu4{} é que utilizamos a técnica de cascata.

Eu aconselho utilizar estilos genéricos apenas para itens importantes, que podem se repetir em vários lugares e que não são vistos pelo usuário.

Como por exemplo:


* { margin: 0; padding: 0; }

.clear { clear: both; } /* escapa os floats */

.center { width: 990px; margin: 0 auto; } /* centraliza o conteúdo */

body { font-family : Arial; font-size: 12px; }

img { border: 0; } /* remove as bordas das imagens no IE */

a { text-decoration: none; } /* remove o underline */

li { ... } /* remove o estilo de lista */

input { ... }

textarea { ... }

select { ... }

button { ... }


Esses são os estilos padrões que eu coloco sempre que inicio um site.

Agora vamos aos estilos específicos para cada parte do site.

Vamos fazer a folha de estilos do HTML apresentado lá em cima.


#topo {}

#topo .menu {}

#topo .menu li {}

#topo .menu li a {}

#conteudo {}

#conteudo .coluna-esquerda {}

#conteudo .coluna-esquerda .categorias {}

#conteudo .coluna-esquerda .categorias li {}

#conteudo .coluna-esquerda .categorias li a {}

/* e etc... */


Nos estilos acima, os que são do menu do topo não afetarão o menu do footer.

 

  • Mas por que utilizar o CSS em cascata?

Eu não quero ensinar como construir um CSS, mas sim como fazer um de forma organizada.

Um mal costume de alguns programadores é fazer o código de maneira nada sugestiva como usar .m{} ao invés de .menu{}

Ou então .esq{} ou invés de .coluna-esquerda{}

Sei que é chato digitar o código inteiro e que como sou eu que estou fazendo o site vou saber o que aquele .m{} representa.

Mas será que daqui a 1 ano vou lembrar? E se outra pessoa tiver que dar manutenção no meu código?

Por isso que criar um código organizado e sugestivo é sempre aconselhável.

E para que não hajam desculpas de preguiça (como um dia eu tive),.

Eu vos apresento o meu gerador de folha de estilo em cascata.

Lembra aquele código HTML ali em cima?

Olha o CSS completo dele:


html body {}

html body div#topo {}

html body div#topo ul.menu {}

html body div#topo ul.menu li {}

html body div#topo ul.menu li a {}

html body div#conteudo {}

html body div#conteudo div.coluna-esquerda {}

html body div#conteudo div.coluna-esquerda ul.categorias {}

html body div#conteudo div.coluna-esquerda ul.categorias li {}

html body div#conteudo div.coluna-esquerda ul.categorias li a {}

html body div#conteudo div.coluna-direita {}

html body div#rodape {}

html body div#rodape ul.menu {}

html body div#rodape ul.menu li {}

html body div#rodape ul.menu li a {}

html body div#rodape div.direitos {}


Eu não precisei digitar uma única letra desse CSS.

 

  • Como utilizar o gerador?

É simples: Basta executar esse código no console do seu Firebug. (Sim, Firebug. Você vai entender o porque quando tentar no Chrome).

Obs.: Você precisa ter o jQuery funcionando na página.

function copiarCSS(){var aa=prompt('A partir de qual setor o css deve ser criado?\nEx.: body ou .header\n\nFrom which sector the css should be created?\nEg: body or .header');if($(aa).size()==0){if(confirm('Setor não encontrado\nTentar novamente?\n\nSector not found\nTentar again?')){copiarCSS();} return;} var ba="";function entrar(aa){aa=$(aa)[0];var ca="";var da=$(aa).parents();for(i=da.size()-1;i>=0;i--){ca+=da[i].tagName.toLowerCase()+(da[i].id?'#'+da[i].id:'')+(da[i].classList.length>0?"."+da[i].classList[0]:'')+" ";}if(aa.tagName=='SCRIPT'||aa.tagName=='STYLE'||aa.tagName=='HEAD'||aa.tagName=='META'||aa.tagName=='LINK'||aa.tagName=='TITLE')return;ca+=aa.tagName.toLowerCase()+(aa.id?"#"+aa.id:"")+(aa.classList.length>0?"."+aa.classList[0]:"")+" {}";if(ba.indexOf(ca)==-1)ba+=ca+";";if($(aa).children().size()>0){$($(aa).children().get()).each(function(){entrar(this);});}};entrar(aa);ba=ba.split(';');saida="";for(i=0;i<ba.length;i++){saida+=(ba[i]+'\n');}console.log(saida);alert(saida);}copiarCSS();

Caso goste do meu código e adote ele, você pode criar um favorito no seu firefox com esse código.

É só adicionar javascript: no início do código.

Ficaria assim:

 

  • Google Code do projeto

Link: http://code.google.com/p/jquery-fred-css-cascading-creator/source/browse/#svn%2Ftrunk

 
Espero ter contribuído um pouco com a internet.

Google Analytics no Ajax, Flash e OnePage site

Essa técnica é boa para sites que abrem o conteúdo sem atualizar a página, como ajax e sites feitos em flash.

Basta apenas uma linha de código para que isso aconteça:

ga('send', 'pageview', '/pagina-que-sera-registrada');

Então,

Se eu quero rastrear que a pessoa entrou na página contato, via ajax ou flash, o código seria:

ga('send', 'pageview', '/contato');

Essa técnica pode ser utilizada também para rastrear a rolagem de página de um site feito em uma única página.

E se eu quiser rastrear uma ação?

As possibilidades são ilimitadas.

Se você quiser rastrear a ação do envio do formulário de contato, você pode colocar por exemplo:

ga('send', 'pageview', '/contato/enviado');

E no Flash?

Se você mexe no flash deve saber como abrir uma página.

Suponto que a página que você quer registrar fica no quadro 70, você colocaria assim, certo?

gotoAndPlay(70);
getURL("javascript:ga('send', 'pageview', '/sua-pagina');");

Simples e fácil.

Adicionando suporte ao jQuery no Magento

Neste artigo vou ensinar como adicionar suporte ao jQuery no Magento.

O Magento já possui suporte ao Scriptaculous, porém ele não é de todo perfeito e caso você queira plugins adicionais que utilizem o jQuery como base você vai precisar do jQuery.

Os arquivos necessários para realização dessa tarefa são:

  1. Versão atual do jQuery
  2. Versão atual do Scriptaculous

Você vai reparar que o Magento já possúi o Scriptaculous, porém as versões mais antigas desse script não foram criadas pensando em compatibilidade com outros scripts e dariam conflito com o jQuery caso você não atualize.

Com os scripts nas mãos faça o seguinte:

Atualizando o Scriptaculous

Copie todos os arquivos do Scriptaculous para /js/scriptaculous/ substituindo todos os arquivos existentes.

Adicionando o jQuery

Abra o arquivo /app/design/frontend/default/seuTema/layout/page.xml

Logo abaixo dos outros scripts adicione a seguinte linha:

[code] <action method=”addJs”><script>jquery.js</script></action>[/code]

Ficando assim:

Agora coloque o seu jQuery na pasta /js/ com o nome jquery.js

O caminho completo seria /js/jquery.js

Agora abra o arquivo do jquery e adicione ao final do arquivo a linha:

[code]jQuery.noConflict();[/code]

Ficando assim:

jquery-no-magento-3

 

Agora vá na administração do seu Magento e atualize o cache para que tudo entre em funcionamento.

Pronto, você adicionou o jQuery no seu Magento.

Para utilizar o jQuery dê preferência pela sintaxe:

[code]jQuery(‘objeto’).acao();[/code]

ao invés de

[code]$(‘objeto’).acao();[/code]

É isso.

Abraços.