Depois de muito tempo sem postar nada no blog, hoje venho trazer uma ferramenta que criei usando NodeJS. Nada mais, nada menos do que o “Tuild” – uma junção das palavras “this & build”.

O Tuild é um construtor/compressor (em inglês: build/minifier) para CSS, HTML e JS. Se ainda não caiu a ficha, o Tuild é uma alternativa – elegante – para:

• Apache Ant – os famosos build.xml (arhg. odeio escrever XML).
• YUI Compressor – feito em Java, serve para comprimir CSS e JS.
• Google Closure Compiler – cria códigos minified do seu JS, também em Java.
• Qual mais?

Enfim, o Tuild é um “tudo em um”, com mais opções (suporte a HTML por exemplo). O motivo da criação do Tuild é exatamente esta: ter um construtor e compressor simples, porém avançado e central, atendendo as principais necessidades de qualquer projeto web.

Bom dia, boa tarde, boa noite… depois de muito tempo sem atividade no blog venho trazer uma novidade para vocês. Alguns já devem saber o que é, não vou ficar de papo furado então vamos direto a novidade:

Linha Framework

Trata-se de um framework (meio obvio não?) para desenvolvimento front-end – HTML, CSS e Javascript. Se você já usou algum grid CSS, como o 960.gs ou Blueprint por exemplo, irá se familiarizar facilmente com este framework, mas o Linha Framework é mais completo.

É mais completo pois não fica somente no grid CSS, temos o grid template (PSD), marcação HTML e CSS, sem falar do plugins para jQuery em támbem. Acredite, desenvolver com um framework poupa e muito o seu tempo. Passando um pouco para a prática, você poderá desenvolver as três camadas (HTML, CSS e JS) de uma só vez, de forma fácil e rápida.

Hoje decidi fazer este post sobre favicons, mostrar seus benefícios 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. 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.

Benefícios

Alguns benefícios 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.

Bom hoje eu vou postar um dos meus “macetes” que uso pra me ajudar na produção de sites… é o famoso “don’t repeat yourself”:

Demonstração / Download

Primeiro vamos ao conceito. Seria um modelo já produzido para agilizar o seu trabalho como webdesigner, por exemplo, você ta lá ganhando o pão de cada dia e se depara com um menu como este… não é mais facil usar o famoso CTRL+C e CTRL+V? Pois bem, este é o conceito… e acredite, sua produtividade vai aumetar e muito... chega de fica perdendo tempo escreve linhas e linhas de código, torrando a cabeça, ouvindo o chefe gritar no seu ouvido porque o job está atrasado… ok, eu apelei mais é essa a intenção.

É claro que cada menu é diferente um do outro e tals, enfim… o objetivo é ter em mãos um modelo propriamente feito, compatível com todos os navegadores, ai é só fazer o jogo do copiar e colar, um pouquinho de alteração aqui… outro ali… e voalá… menu certinho e produzido pelo menos na metade do tempo. Já deu pra entender né…

Como não te muito o que falar vamos logo ao bendito menu em css:

HTML:

<ul class="menu">
<li><a href="">Home</a></li>

<li><a href="">Contato</a></li>
<li><a href="">Serviços</a></li>
<li><a href="">Musica</a></li>
<li><a href="">Teste</a></li>
</ul>

O codigo HTML é só isso mesmo, uma lista simples, nada demais…

CSS:

ul.menu li {
float:left;
background: #333;
padding:0px;
line-height: 30px;
border-style: solid;
border-width: 1px;
border-color: #404040 #1a1a1a #1a1a1a #505050;
}
ul.menu li a{
display: block;
padding: 5px 30px;
color: #fff;
font-size:17px;
font-family:Arial,Helvetica,sans-serif;
text-decoration: none;
font-weight: bold;
}
ul.menu li a:hover, ul.menu li:hover{
color: #fff;
background: #4698ca;
border-top-color: #5db1e0 !important;
border-left-color: #5db1e0;
}

Se você fizer o download dos arquivos verá que quase todas as linhas de códigos do CSS (algumas seria idiotisse comentar) estão comentadas explicando o funcionamento de cada uma.

Até a próxima.