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.

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

Sete dicas sobre o layout do seu e-mail marketing

Me enviaram hoje cedo essa dica sobre E-mail Marketing e achei muito boa.

Foi escrita pelo Francisco Lourenço Lopes no portal iMasters.

Não é raro encontrar peças de e-mail marketing muito bem elaboradas do ponto de vista estético. O problema é que a maioria resulta de adaptações de peças de materiais impressos, e isso não funciona!

Neste artigo, são apresentadas sete dicas para se conseguir um retorno melhor, desde que algumas alterações sejam feitas no layout do seu e-mail marketing.

  • Dica 1 – E-mail marketing com uma grande imagem de impacto é legal?

Pode parecer que sim, mas estudos americanos apontam que 74% dos e- mails são recebidos com imagens bloqueadas. Por esse motivo, o layout do seu e-mail marketing não deve ser deve ser apenas uma grande imagem, pois, muito provavelmente, o que seu cliente vai receber é o famoso “x” vermelho com a frase: “Clique aqui para exibir a imagem”. Poucas pessoas estão dispostas a clicar para exibir uma imagem de algo que não sabem do que se trata. Esse é o primeiro passo para aumentar a produtividade do seu e-mail.

  • Dica 2 – Vamos usar o que há demais moderno na versão do Html?

Hoje, a tendência é querer ter acesso ao que há de mais moderno quando o assunto é tecnologia. Mas vamos pensar que o seu e-mail será enviado para diferentes pessoas, que usam diferentes plataformas de envio e recebimento de mensagens.

Considerando que os programas de e-mail são muitos (diversas versões de Outlook, Eudora, Thunderbird, Apple Mail etc.) e que os Web Mails como (Gmail, Yahoo, Hotmail, Uol, Bol etc.) também existem em uma quantidade enorme, o seu código html deve ser o mais básico possível, de modo a evitar incompatibilidade com qualquer das plataformas citadas acima, fazendo com que o seu layout não sofra alterações indesejáveis.

  • Dica 3 – A página ímpar do seu html.

Assim como as outras mídias, o e-mail marketing tem suas peculiariedades. Se em uma revista ou em um jornal a página ímpar (a da direita) é a mais desejada porque tem um número maior de visualizações, no e-mail marketing também temos a área para a qual a maioria das pessoas direciona o olhar.

A maioria dos usuários utiliza a organização das plataformas de e-mail da seguinte maneira: cabeçalho, pastas, mensagens e o painel de leitura. O painel de leitura é a área de 3 cm a 5 cm que o usuário irá ver do e-mail recebido, sem abri-lo. Essa é a sua página ímpar, o horário nobre do seu e-mail marketing. Evite colocar um logo enorme da sua empresa nessa região, uma vez que essa informação já estará presente no remetente da mensagem. Utilize essa área para passar a mensagem mais importante do seu e-mail e também para convencer o usuário a visualizar o resto.

  • Dica 4 – Como colocar as imagens no corpo do seu e-mail?

Como visto na primeira dica, as imagens geralmente não são mostradas para o usuário. Isso não significa que você não deva colocá-las. O que deve ser feito é construir um layout que seja compreensível e agradável, mesmo sem a exibição delas.

Muitas pessoas usam a imagem colada ao corpo do e-mail, mas isso deve ser evitado, pois diminui a performance da sua entrega, uma vez que aumenta muito o tamanho do e-mail. Além disso, corre-se o risco de o seu e-mail ser enquadrado como spam. A melhor prática é hospedar suas imagens em um servidor na web e inseri-la como código em seu html.

  • Dica 5 – Onde usar seus links no seu layout?

Muitas pessoas usam os links apenas nas imagens, o que é um erro. Como as imagens nem sempre são exibidas, a melhor maneira é colocar o link no corpo do e-mail, através de botões em html que servem como iscas, ou ainda, simplesmente, colocá-los em formato de texto.

No ramo imobiliário, por exemplo, o botão valores é o campeão de índice de cliques, uma vez que as pessoas estão interessadas em saber quais são os preços dos imóveis à venda.

  • Dica 6 – Descreva suas imagens

Já que as imagens nem sempre são mostradas, há uma forma de tentar chamar a atenção do usuário colocando uma descrição interessante para estimular as pessoas a exibi-las. Existe um atributo da tag IMG chamado “alt”. O uso desse atributo no código html fará mostrar ao lado do inconveniente “x” vermelho o descritivo dessa imagem, aumentando a probabilidade de abertura.

  • Dica 7 – Pirotecnia no layout

Alguns profissionais de design insistem em mostrar suas habilidades criando flashs, ou gifs animados que são visualmente atrativos aos olhos de qualquer ser humano. O problema é que, na era html 4 em que vivemos hoje, eles não são exibidos em todas as plataformas. Portanto, o uso de flash, gifs, formulário de contatos, anexos etc não deve ser incorporados ao seu layout. Preocupe-se em fazer um layout agradável, de fácil entendimento e relevante para o assunto de seu e-mail marketing, mas, ao mesmo tempo, utilizando apenas códigos básicos de HTML.

A DreamHost foi vendida

Quando li quase não acreditei. Gosto tanto do serviço da DreamHost que fiquei com medo da qualidade do serviço não ser mais a mesma. Mas vamos esperar que sim né?

Recebi o newletter da DreamHost hoje em meu e-mail e um trexo falava sobre a mudança de dono. Agora quem comanda é a EIG (Endurance International Group). A EIG é na verdade um grupo de Web Hosts. A DreamHost afirmou que a qualidade vai continuar a mesma.

Uma das mudanças já anunciadas na news é que o painel de controle como o conhecemos irá mudar para o famoso cPanel.

Veja a notícia original:

Meet Our New Owners, EIG

Oh those drapes? Yes, as a matter of fact they are quite new. And they do match the carpets now, thank you for noticing! Our new owners insisted on them.

You see, we’ve recently been acquired by the Endurance International Group, a conglomerate of many different web hosting brands. They assure us that nothing about our service will change, but they have recently made some changes to the decor.

And indeed some aspects of our hosting services will be changing as well.

Our in-house technical support team is being moved onto other projects within the company as we prepare to transition to a more cost-effective offshore support platform.

Perhaps the most visible change to you, the customer, is that we’ll be retiring our control panel in favor of the industry-leading cPanel administration system.

You can read more details of the acquisition on our blog: EIG acquires DreamHost!

Ah, é piadinha de primeiro de abril. A DreamHost não foi exatamente vendida e sim, se juntou ao grupo EIG que tem 37 web host.

Espero que com isso a qualidade só melhore.

Inaugurando o site

Pensei em criar este site com o propósito de divulgar meus trabalhos. Mais tarde senti uma nova necessidade que também poderia ser suprida pelo site: um armazem de how to do que eu aprendo.

Sendo assim, vou utilizar este site não só para divulgar o que faço, mas também para passar meu conhecimento pra frente. Com isso espero ganhar amigos com os mesmos interesses.

Atualmente tenho conhecimento de C#, Java, CSS, HTML, javascript, jQuery, um pouco de AS2 e AS3. Estou neste momento montando os novos sites das empresas Sorvedoces e Informatiza Brasil. Os sites dos links são os atuais, os novos, porém, podem ser vistor nessas duas thumbs:

O site da Informatiza está sendo o maior desafio, pois nunca mexi com Magento eCommerce. O da Sorvedoces só não ficou pronto ainda porque os clientes ainda não disponibilizaram as informações que serão cadastradas no site, só estou dependendo disso.

Bom, é isso, site inaugurado.