CSS Frameworks

August 4th, 2008

Como em um passe de mágica, ou um pouco menos lento que isso, espalharam-se pela internet os danados, e facilitadores, CSS Grids ou melhores nomeados de CSS Frameworks. No inicio desse processo todo eu comecei testando o 960Grid System e o Blue Print, muito bons mesmo, cada um nas suas especialidades. Hoje rodando pelos blogs da vida para animar a começar criar, o que foi dificil, encontrei um post muito interessante sobre os diversos tipos de CSS Frameworks encontrados pela rede.

No site Hidden Pixels .com encontrei uma lista bem completa para com os mais conhecidos frameworks de CSS da net, vale a pena baixar alguns testar e usar essa facilidade para montar layouts em XHTML.

Link: CSS Frameworks

Sempre, sempre jQuery, declaradamente meu framework preferido. Nomeado de Kwicks o sample foi todo desenvolvido em jQuery, mais um plugin muito r0x e muito simples mesmo de utilizar, um salve para Jeremy Martin.

Usando de um menu simples feito em lista (ul):

<ul class="kwicks" > 
     <li id="kwick1"></li> 
     <li id="kwick2"></li> 
     <li id="kwick3"></li> 
     <li id="kwick4"></li> 
</ul>

O estilo voce faz como preferir respeitando as config abaixo:

.kwicks li{ 
     float: left; 
     width: 125px; 
     height: 100px; 
     margin-right: 5px; 
}

e por fim so ativar o plugin na classe 'Kwicks' colocada na tag 'ul':

$().ready(function() {
    $('.kwicks').kwicks({
        max : 205,
        spacing : 5
    });
});

Para funcionar perfeitamente, claro, deve importar o js do jQuery e outro do Kwicks:

Kwicks uncompressed
Kwicks packed

Espero que gostem, bem simples mas com um resultado muito expressivo, como diz o próprio slogan do jQuery: "escreva menos e faça mais".  Cya.

Link: Kwicks for jQuery

Eu adoro icones, e isso vem de muito tempo já, brinquei muito com Microangelo, um programa muito louco pra criar pixel icons. Hoje muito mais bonitos e cheio de efeitos, os icones estão na web como forma de criar uma identidade para o site e o fazem de forma muito bela.

Sou usuário do site IconBuffet, onde com uma moeda interna, que recebe mensalmente, você consegue comprar icones entre os usuários, uma proposta bem legal mas que muitas vezes demora. E como web é tempo, e cliente quer prazo, devemos ter uma reserva sempre bem feita de projetos, exemplos, vetores, animações, galerias, icones e tudo que possamos utilizar em nossos projetos, mesmo que não sejam usados da forma como guardamos esses podem nos inspirar para novos vôos.

Por essas andanças de blog em blog encontrei uma lista muuuuuito completa mesmo com icones para download, com qualdiade muito boa e de um bom gosto fantástico. Segue abaixo algun samples e link do posto original.

Free Web Application Icon Set

 

Function Icon Set

 

Link: Developer Icon Sets Collection

Photo Gallery AutoViewer

July 19th, 2008

Uma galeria feita em Flash muito 'r0x', em formato de slide voce pode adicionar suas fotos e permitir que os usuarios possam navegar entre ela de forma manual ou atraves de um play no slideshow. O melhor de tudo: Free license. Link do site abaixo...

Link: Flash AutoViewer Photo Gallery

jQuery for Dummies

July 18th, 2008

Quem trabalha com web hoje em dia, com Coding principalmente, encontra em diversos sites fontes muito interessantes de jQuery. Esse danado, que amo (lol), não serve somente para dar uma vida, animadinha, no site, ele vai muito além.

Com jQuery você pode validar forms em realTime usando efeitos de fade ou slide nas suas mensagens, pode fazer seus campos de texto ou tags como H1 serem editáveis com projetos em Ajax e muito mais, fora as animações é claro.

No site “Web Dev Lounge” encontrei um tuto muito legal para iniciantes nessa biblioteca de JavaScript, fácil dimais de utilizar e muito bom para expandir. Link abaixo.

Link: jQuery for Dummies on Web Dev Lounge

Png fix para IE 6

July 16th, 2008

Quem não tem problemas e mais problemas ao desevolver um projeto web para o IE 6? Qualquer um já passou por isso e é um sufoco, assumo. Uma versao simples de um PNG fix para o Internet Explorer 6 é o "Unit PNG Fix", somente dois 2kb de javascript e bem eficiente. Suporta autosize nas imagens, diferente de outras versoes de fix para esse problema. Abaixo link do site e download.

Link: Unit PNG Fix Site

jQuery Multiple Dropdown

June 20th, 2008

Cada dia que passa fico mais impressionado com os poderes do jQuery. Hoje pesquisando mais sobre o infeliz encontrei algo muito interessante, um menu dropdown com multiplas opções, colunas e sub opções. Complicado de imaginar isso sem ver funcionando. O addict do jQuery tem 47k, incluindo a biblioteca base e ainda é XHTML válido.

Acesse o link do post original no labs do Gíva para fazer download do Dropdown. Link e print abaixo:

Link: http://www.givainc.com/labs/mcdropdown_jquery_plugin.htm

jQuery Chart Plug-in

June 13th, 2008

Como novo ‘jQuery Lover’ que sou não podia deixar de mostrar esse plugin para Chart do jQuery muito fácil de trabalhar, chamado: Flot.

Muito fácil de trabalhar e com uma interface muito simples de compreender, o Flot é um plugin que funciona junto com a biblioteca do jQuery que cria resultados em gráficos muito legais. Abaixo vou deixar o link para download e visualização dos demonstrativos.

DEMO: http://people.iola.dk/olau/flot/examples/
DOWNLOAD: http://code.google.com/p/flot/

AS2 para AS3

June 10th, 2008

O que há de diferença entre o gasto e velho ActionScript 2 para o novo e ainda misterioso AS3. Muita coisa interessante no site da Adobe que mostra as diferenças entre as duas variações da linguagem do Adobe Flash. Vale a pena ler um poquinho.

Link: ActionScript 2.0 Migration by Adobe

Estou ficando muito velho. Começar um post com essa frase parece crise dos 30 (e olha que nem cheguei em 25 anos ainda eheh), mas muita coisa dentro dos oito anos de internet que tenho ja mudaram e mudam todos os dias. Depois de muito rodar e optar muitas vezes pelo flash para animar certas coisas bem simples em algumas páginas, optei por conhecer e usar algumas bibliotecas em Javascript. Mas uma delas me agradou muito; jQuery.

Basicamente o jQuery parece um animador Javascript, mas conhecendo melhor vemos que é muito alem disso. Nesse post de hoje vamos falar sobre ToolTip e Image View feito em JS.

Originalmente postado no site do CSSGlobe, e baixado clicando aqui.

Recomendo, muito simples de entender. Somente para illustrar o Tooltip - primeiro exemplo - é feito um link normal em HTML:

<a href="http://cssglobe.com" class="tooltip" title="Web Standards Magazine">Roll over for tooltip</a>

O jQuery utiliza o texto colocado dentro do parametro 'title' dentro da tag 'a' para criar o Tooltip com um fade muito discreto e interessante. A partir desse exemplo segue os outros dois com fade em imagens, também muito legal.

Para utilizar desses efeitos basta incluir em seu codigo HTML o arquivo Javascript do jQuery, que pode ser baixado via Google Code em : http://code.google.com/p/jqueryjs/downloads/list

Espero que gostem e bom inicio de semana.