Instale o FIREBUG

Devem existir muitos poucos  webdevelopers que não tenham esta extensão em funcionamento.

Revela-se efectivamente um verdadeiro canivete Suiço para analisar a CSS (folha de estilos) de um site.

Mas se ainda não conhece este Add-On para o Firefox, ou não entende o seu funcionamento, veja este pequeno vídeo e comece hoje a inspeccionar as suas folhas de estilo.

Using Firebug for CSS from kristarella on Vimeo.

Posts Relacionados:

1. Melhores add-ons Firefox para webdesigners
2. CSS Vista, editor de CSS online no IE e Firefox
3. Editor Open Source de CSS

Ambos os templates são simples documentos baseados nas 24 unidades da framework Blueprint.

Pode efectuar o download dos templates a partir daqui:

• Illustrator Template for Blueprint
• Photoshop Template for Blueprint

Posts Relacionados:

1. BlueTrip CSS Framework
2. Adobe Illustrator Tutorials
3. Templates para o design de logos

BlueTrip concede um conjunto de estilos de grande qualidade para a criação de websites, permitindo-lhe assim libertar de um trabalho por vezes bastante árduo, concedendo-lhe tempo para o desenvolvimento e concepção do design do seu projecto.

Funcionalidades:

• 24-column grid
• Sensible typography styles
• Clean form styles
• A print stylesheet
• An empty starter stylesheet
• Sexy buttons
• Status message styles

Download BlueTrip:

Zip Package Tarball Package

Posts Relacionados:

1. CSS Drop-Down Menu Framework
2. Templates (Photoshop e Illustrator) para a CSS Framework Blueprint
3. Recursos CSS

Funcionalidades:

- Sistema modular com temas. Não só o HTML está separado da CSS, como as definições da CSS estão estruturalmente categorizadas.

- Para criar um novo menu só é necessário criar um novo tema, dado que a estrutura é permanente. A criação de um tema é muito simples, com os templates disponíveis não é necessário mais do que 15 minutos.

- Completamente gratuito.

- Código e ficheiros muito bem organizados. Ligação a CMS ou outras ferramentas é feito com recurso ao formato XHTML.

- Fácil de alterar. Por vezes só necessário alterar o nome de uma classe. Uma grande variedade de transformações possíveis.

- Funcionamento em todos os browsers.
Disponível para: Internet Explorer, Mozilla Firefox, Opera, Apple Safari 2.

- JavaScript só para o IE. Código JavaScript mínimo para o IE 6 ou anterior. Pode ser usado com outras livrarias, tais como, os populares Jquery ou Scriptaculous.

- Muito rápido e leve.

Showcase

simple

ultimate

flickr

nvidia

adobe

mtv

Posts Relacionados:

1. 3 Temas gratuitos para WordPress
2. Temas gratuitos para Drupal
3. Templates (Photoshop e Illustrator) para a CSS Framework Blueprint

Com Tablesorter é possível efectuar com sucesso o processamento de uma grande variedade de informação inserida numa célula.

tablesorter

Algumas das suas funcionalidades:

• Multi-column sorting
• Parsers for sorting text, URIs, integers, currency, floats, IP addresses, dates (ISO, long and short formats), time. Add your own easily
• Support for ROWSPAN and COLSPAN on TH elements
• Support secondary “hidden” sorting (e.g., maintain alphabetical sort when sorting on other criteria)
• Extensibility via widget system
• Small code size (7,4kb packed)

Posts Relacionados:

1. Mondrianum plugin para Mac OS X
2. Tabelas em CSS
3. plugin Paypal Donation WordPress

O Internet Explorer 6 é sem sombra de dúvida um mau navegador, são inúmeros os defeitos e bugs deste browser mas um que sem dúvida deixou e ainda deixa muitos designers e desenvolvedores de websites é o problema de imagens em formato PNG.

Existem já um grande número de soluções para a correcção de transparências em PNG para o IE 6, umas socorrendo-se de algumas técnicas com CSS, outras recorrendo a livrarias específicas em JavaScript.

O Wp-UnitPNGfix é assim uma solução, para o problema citado, sob a forma de um plugin para ser utilizado num blog em WordPress. Este plugin inclui o ficheiro unitpngfix.js (javascript) se o browser detectado for o IE6 ou inferior. O plugin funciona com imagens e atributos com imagens em background.

Página sobre o plugin:

Plugin: WP-UnitPNGfix

Posts Relacionados:

1. rollover menus com transparências PNG
2. Uso criativo de transparências PNG em Web Design
3. Transparências em PNG no Internet Explorer

Funcionalidades

Rápido – O carregamento da página é o normal, o download da imagem em alta resolução é feito de forma invisível em background.

Fácil – Inserido em qualquer website.

Customizável – pode alterar o tamanho, a posição as cores, etc.

Eficiente – Funciona mesmo com o JavaScript desactivado (a imagem ampliada abre como um link).

Várias imagens – suporte para mais do que uma imagem.
É uma ferramenta de grande interesse aplicacional para o caso de lojas online que pretendam focar particularidades mas imagens dos seus produtos. Utilizando o movimento do mouse numa imagem é possível obter um efeito de zoom à imagem, vendo detalhadamente cada uma das suas partes com um destaque impressionante.

Exemplos Magic Zoom™

Instruções de integração do script Magic Zoom™ Integration

De referir que embora este script não seja gratuito o seu desenvolvedor permite a sua utilização, licença grátis, para quem pretenda a utilização para sites não comerciais. No site do autor pode obter uma trial para testar o script.

Posts Relacionados:

1. Zooming de imagens com Javascript
2. Converter imagens Bitmap para imagens Vectoriais
3. Slideshow de imagens em flash

Suporta rotações de RSS, XSPF ou ASX playlists em imagens JPG, GIF e PNG.

O script inclui um grande número de variáveis (flashvars) que permitem alterar o comportamento e o aspecto e providencia uma extensa API.

Download JW Image Rotator

Documentação JW Image Rotator

Posts Relacionados:

1. SimpleViewer – Slideshow em Flash
2. Zooming de imagens com Javascript
3. Detalhes de Imagens com efeito de Zoom

Adicionando simplesmente duas linhas de código à sua página, controle a forma como são mostradas as tabelas no seu site. Não precisa de trabalhar com código complexo para as classes ou ids nas tabelas, com tablecloth os efeitos visuais são obtidos de forma automática.

Ao passar com o mouse pela tabela (mouseover), Tablecloth faz o highlight de uma linha ou coluna (ou ambas) automaticamente. Um script simples e fácil de usar.

Posts Relacionados:

1. Tabelas em CSS
2. Graphita – Efeitos em fotos
3. jQuery Plugin para ordenação em tabelas

Esta é a proposta de Hedger Wang que ensina como criar botões com cantos arredondados com o recurso únicamente a uma imagem e uma folha de estilos.

Este tutorial mostra como é possível a criação de botões baseados em CSS, sensíveis a efeitos tais como, mouseover e mouseout.

Do mesmo autor, ainda pode ver como obter Link Buttons with simple CSS and HTML.

Posts Relacionados:

1. Botões W3C
2. 20 Botões brilhantes
3. Botões em formato vectorial