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:

</p>
<p><body></p>
<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>
</p></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>
</p></div>
<p></body></p>
<p>

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:

</p>
<p>* { margin: 0; padding: 0; }</p>
<p>.clear { clear: both; } /* escapa os floats */</p>
<p>.center { width: 990px; margin: 0 auto; } /* centraliza o conteúdo */</p>
<p>body { font-family : Arial; font-size: 12px; }</p>
<p>img { border: 0; } /* remove as bordas das imagens no IE */</p>
<p>a { text-decoration: none; } /* remove o underline */</p>
<p>li { ... } /* remove o estilo de lista */</p>
<p>input { ... }</p>
<p>textarea { ... }</p>
<p>select { ... }</p>
<p>button { ... }</p>
<p>

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.

</p>
<p>#topo {}</p>
<p>#topo .menu {}</p>
<p>#topo .menu li {}</p>
<p>#topo .menu li a {}</p>
<p>#conteudo {}</p>
<p>#conteudo .coluna-esquerda {}</p>
<p>#conteudo .coluna-esquerda .categorias {}</p>
<p>#conteudo .coluna-esquerda .categorias li {}</p>
<p>#conteudo .coluna-esquerda .categorias li a {}</p>
<p>/* e etc... */</p>
<p>

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:

</p>
<p>html body {}</p>
<p>html body div#topo {}</p>
<p>html body div#topo ul.menu {}</p>
<p>html body div#topo ul.menu li {}</p>
<p>html body div#topo ul.menu li a {}</p>
<p>html body div#conteudo {}</p>
<p>html body div#conteudo div.coluna-esquerda {}</p>
<p>html body div#conteudo div.coluna-esquerda ul.categorias {}</p>
<p>html body div#conteudo div.coluna-esquerda ul.categorias li {}</p>
<p>html body div#conteudo div.coluna-esquerda ul.categorias li a {}</p>
<p>html body div#conteudo div.coluna-direita {}</p>
<p>html body div#rodape {}</p>
<p>html body div#rodape ul.menu {}</p>
<p>html body div#rodape ul.menu li {}</p>
<p>html body div#rodape ul.menu li a {}</p>
<p>html body div#rodape div.direitos {}</p>
<p>

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);<br />
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.