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.

Dicas para desenvolvimento de Wireframes (by Richard Barros)

Olá você!

Encontrei umas dicas muito legais sobre a criação de Wireframes escrita por Richard Barros e queria compartilhar.

O que acho mais interessante sobre os Wireframes é podermos identificar antes da prodição do layout erros na usabilidade ou a falta de algum requisito importante.

Fora isso, o Wireframe ajuda na organização do desenvolvimento e agiliza o lado do designer.

Veja a matéria do Richard Barros:

 

No planejamento de uma interface, o profissional de arquitetura de informação precisa fazer alguns testes até chegar a um modelo estrutural para ser usado como base. Este modelo é conhecido como Wireframe.

 

Wireframe é um rascunho com marcações de peso e posicionamento do conteúdo de uma interface. Ele será usado posteriormente pelo designer como guia para desenvolvimento do layout final do website, sistema ou aplicativo.

Ainda vejo muitos profissionais com receio de usar wireframes e alegam que o cliente não entende ou que o trabalho demora mais, mas eu acredito que é uma etapa primordial na criação de uma interface e portanto, levantei alguns pontos que podem ajudar novos profissionais a entender ou incorporar com naturalidade o desenvolvimento desses esboços.

 

Nunca pule a etapa do wireframe.

 

Passar pela etapa de wireframe não é trabalhoso e é essencial para o progresso do projeto. Criar um esboço e pensar na navegação antes de ter um layout desenhado pode fazer com que perceba algum erro de usabilidade ou algum bloco de conteúdo que não está sendo exibido com o devido destaque. É muito melhor perceber essas coisas antes, né?

 

Não tenha medo.

 

Arquitetos de informação não são necessariamente designers, mas não saber desenhar não significa que tenha que ter medo de criar wireframes. Supere esse medo e expresse suas ideias no esboço de alguma forma. Desenvolver wireframe é como projetar seu website em voz alta.

 

Papel e caneta.

 

Não é porque a interface é digital que todo o processo deve acontecer dentro do computador. Pegue papel e caneta e rabisque muito. Coloque todas as ideias no papel. Você pode recortar pedaços de papel ou usar post-its para reposicionar os blocos de conteúdo com maior facilidade, é uma baita mão na roda.

 

Teste seu wireframe.

Questione cada interação do seu wireframe. Imagine um usuário específico tentando acessar aquela interface e peça opiniões de outras pessoas da equipe que não participaram diretamente da elaboração dos esboços (por que não incluir o cliente nessa também?). Essa discussão pode levantar pontos importantes que você deixou passar em um primeiro momento.

Inspire-se.

Procure por novos wireframes, compartilhe ideias com amigos que não trabalham com você. Visite sites de referência como o I <3 Wireframes ou até o Flickr.

Existe ainda um projeto chamado Paper Browser, que é um modelo de navegador web com um canvas milimetrado para você imprimir e poder desenhar em cima facilmente. Eu recomendo!

Ferramentas.

Embora eu ainda use o Photoshop para meus wireframes, há quem use programas não muito convencionais, como o Flash. Mas existe também uma grande variedade de ferramentas para auxiliar no desenvolvimento de wireframes que você pode escolher. E a lista não é pequena:

Ferramentas para Desktop (freeware em negrito)

Ferramentas Online

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.

Left 4 Dead 2 Server

Este é um aplicativo bem útil para quem gosta de jogar com os amigos.

Bom ele é possível abrir qualquer fase do jogo no modo multilplayer.

O aplicativo ajuda também na seleção do IP que será usado como hoster do game e ele me memoriza as ultimas opções escolhidas.

Esta é a interface do aplicativo:

Tudo que você tem que fazer é encontrar o jogo, escolher o IP que já vem selecionado o do hamachi se você o tiver, escolher a fase e iniciar.

Dowlonad: clique aqui

Encurtador de Links

Esse programa ajuda na hora de encurtar links. Com ele você encurta um ou vários links com apenas 1 click.

Tem duas formas de usar ele: uma é pela interface e a outra é pelo icone que fica ali perto do relógio do windows, a famosa panela de pressão.

A interface dele é bem simples: de um lado você insere os links e do outro você obtém os links encurtados.

A outra forma de encurtar é pelo icone lá perto do relógio, que tem três funções.

Botão esquerdo: abre a interface do programa.

Botão direito: Exibe o menu de contexto como mostrado abaixo:

Com o direito você vê essas opções de encurtamento que irá pegar o link que está copiado e te devolverá o link encurtado já copiado pronto para você colar e compartilhar.

Nessa opção do botão direito não é possível encurtar mais de um link.

Botão do meio: A ultima funcionalidade é a do botão do meio do mouse, que é a rolagem do mouse. Você sabia que tem um botão ali? Sim, tem! Ao pressionar o botão do meio ele vai encurtar usando a ultima opção escolhida no botão direito. Se você clicou com o botão direito e escolheu Migre.me quando clicou com o botão direito, então quando clicar com o botão do meio, o Migre.me que será escolhido.

Caso deseje que ele inicie automaticamente com o windows, basta marcar a caixinha: Iniciar com o windows.

Link para download: link