Galerias – Inspiração para Webdesign »

12jul 2010, às 08:00

Publicado em Inspiração | Deixe o seu comentário (1) »

publicado por: Magno Valdetaro

Html5 Gallery

HTML5 gallery tem por objetivo proncipal promover o uso do HTML 5 por web designers com exemplos de sites reais que já utilizam as novas normas da W3C.

Wireframe Showcase

Em vez de focar só no resultado final a galeria Wireframe Showcase permite visualizar wireframes, protótipos, esboços de um site com opção de discussão. Vale a pena a visita.

koflash

Ótima galeria de sites produzidos totalmente em flash, como opção de compartilhar com twitter, adcionar ao delicious e acrescentar comentários.

Mobile Awesomeness

A internet móvel está aí e isso não se pode contestar, hoje em dia uma versão móvel do web site é sempre bem vinda. Visite Mobile Awesomeness e conheça pelos exemplos de projetos para dispositivos móveis.

Grid-Based

A quem critique que usar grids limita a criatividade ao criar um layout mas, o uso de grids em um projeto oferece um sentido de ordem sistemática através da colocação e alinnhamento dos elementos de design. Grid Based exibe belos exemplos de sites que empregam este recurso.

CSS Elite

Maravilhosa galerias com dezenas de sites expostos que se utilizam da força do css.

Formee – Um framework CSS para construção de formulários »

04mai 2010, às 10:00

Publicado em Framework | Seja o primeiro a comentar (0) »

publicado por: Magno Valdetaro

Formee é um framework que facilita a produção de formulários cross-browser de maneira fácil e rápida.

Ele funciona com a mesma técnica fornecida pelo conhecido 960 Grid System para facilitar montagem do layout do formulário de um website com total flexibilidade.

Veja o exemplo.

Este framework se em caixa em qualquer projeto, uma vez que a estrutura tenha sido criada em torno de larguras disponíveis.

Formee foi construído com o menos número de marcações e gera formulários com boa semântica. Estilizar os forms não é complicado pois Formee dispõe de 2 arquivos um para estrutura e outro para o estilo. Para completar Formee conta com alguns elementos a parte como mensagens de erro, avisos e alertas de sucesso.

CSS Framework – 960 Grid System »

03mai 2010, às 07:48

Publicado em Framework HTML / CSS | Deixe o seu comentário (4) »

publicado por: Magno Valdetaro

Framework

Segundo a Wikipédia um framework se resume em uma abstração que une códigos comuns entre vários projetos de software provendo uma funcionalidade genérica. Um framework pode atingir uma funcionalidade específica, por configuração, durante a programação de uma aplicação. Ao contrário das bibliotecas, é o framework quem dita o fluxo de controle da aplicação, chamado de Inversão de Controle.

Mas está definição é muito complicada prefiro está do imasters:

Frameworks são estruturas de códigos definidas onde um projeto de software, seja ele web ou não, pode ser criado e desenvolvido. Frameworks podem incluir programas de suporte, bibliotecas de código, linguagens de script ou qualquer outro tipo de software para auxiliar no desenvolvimento.

Eles foram projetados para auxiliar no desenvolvimento de softwares, auxiliando designers e programadores a gastar menos tempo com desenvolvimento.

Em CSS, frameworks geralmente são um conglomerado de arquivos css com coisas base para tipografia, estrutura de layout, menu. Sua utilização deve ser muito cuidadosa, pois utilizar frameworks em desenvolvimento XHTML e CSS pode não trazer a mesma produtividade do que se você estivesse usando um framework para PHP, JavaScript. É importante que o desenvolvedor saiba ler e compreender o código que ele está escrevendo.

Veja todo o artigo do Imasters sobre framework.

CSS Framework

A definição do termo na Wikipédia é a seguinte: “trata-se de uma biblioteca pré-configurada cujo objetivo é facilitar a criação de layouts o mais próximo possível dos padrões web”.

960 Grid System

Apesar de algumas pessoas acharem que grids limitam a criatividade, elas na verdade são muito úteis e funcionais e aceleram o processo de produção. Goste ou não, as páginas web essencialmente giram em torno de formas de caixas. Inevitavelmente, estes retângulos têm de se unir de alguma forma ou de outra para formar um desenho. Um sistema de grid é uma técnica adota para organizar conteúdo a muito tempo em páginas impressas e nos últimos anos vêem sendo utilizada em peso também para aplicações web.

960 Grid System é um framework com 960px de largura (por isto leva este nome), dividido em 24, 16 ou 12 colunas.

Veja a referencia visual das grids.

O pacote tem 180Kb, mas não se assuste este não é o tamanho do arquivo CSS, o pacote consiste de um arquivo para impressão onde você pode rascunhar seu layout ou desenhar seu wireframe manualmente, modelos para Fireworks, Photoshop, OmniGraffle e outros. O 960.css arquivo em si é apenas 3,6 KB quando comprimido.

Veja o tutorial em vídeo de como utilizar o 960 Grid system:

Lista de ferramentas muito úteis para desenvolvedores CSS3 »

13abr 2010, às 09:38

Publicado em Ajax/Javascript/Jquery CSS3 Ferramentas HTML / CSS | Deixe o seu comentário (2) »

publicado por: Magno Valdetaro

De um modo geral, CSS é muito fácil de se entender e aprender. Mas quando os fabricantes de navegadores começaram a implementar recursos da CSS3, as coisas tornaram-se pouco complicadas. Devido principalmente por dois motivos: primeiro, muitas das novas propriedades CSS3 (por exemplo, a transition, gradient e transform) não são tão simples, e por este motivo, temos de usar extensões específicas de cada navegador.

Até o momento nossos melhores amigo são os geradores de CSS3, as cheat sheets, os guias de referência e as soluções em Java script.

Veja agora a lista de ferramentas úteis para desenvolvedores CSS3:

Geradores

CSS3 Please!

A primeira da lista é a CSS Please ferramenta usada para gerar de regras CSS3, suporta: border-radius, caixa-sombra, o gradiente linear), cores RGBA (, de transformação (rotação), a transição e @ font-face.

CSS3 Generator

Já comentado aqui no blog CSS3 Generator, suporta: border radius, box shadow, text shadow, RGBA, @font-face, multiple columns, box resize, box sizing and outline.

CSS3 Sandbox

Mais um gerador CSS3 para Linear Gradientes ,Gradientes radiais , Texto Shadows , Box Shadows , Transforma eStroke texto.

@ Font-face Generator

Quer utilizar fontes não padrão no seu website, o @Font-face Generator te ajuda na tarefa de gerar regra da propriedade @font-face.

CSS3 Gradiente Generator

Gere gradientes linear com CSS3 com ajuda do CSS3 Gradiente Generator

CSS Border Radius

Gera a propriedade borde-radius para o Mozilla, Webkit e a sintaxe padrão.

Webkit CSS3 Generator

Simples gerador CSS que ajuda você a entender as capacidades da CSS3 introduzidas pelo WebKit.

CSS3 Learning Tool

Ferramenta dinâmica que verificar se a propriedade é suportada pelo navegador em uso e aplica o prefixo para este.

Soluções em JavaScript

Modernizr

Uma excelente biblioteca Java script que detecta a disponibilidade de funcionalidades nativas HTML5/CSS3 e oferece uma maneira de manter o controle sobre seu site, independente das capacidades do navegador. Se gostar do mootools, você pode usar o MooModernizr.

CSS3 pseudo-class Selector Emulation

Permite o uso de pseudo-classe no internet explores. Basta incluir o script em suas páginas e começar a utilizar esses seletores em sua folha de estilo.

CSS3 support for Internet Explorer 6, 7, and 8

IE-CSS3 é um script que oferece suporte a CSS3 para os navegadores Internet Explorer, vários dos estilos populares estão disponíveis.

ie7-js

Mais uma biblioteca para fazer o Internet explorer se comportar como um browser compatível com as normas.

Sizzle - Seletor JavaScript Library

Sizzle suporte praticamente todos os seletores CSS3  -  isso inclui até mesmo alguns raramente usados.

Se achou este post útil não deixe de comentar ou repassar para amigos.

HTML5 Less Framework »

04mar 2010, às 09:12

Publicado em Framework HTML / CSS | Deixe o seu comentário (1) »

publicado por: Magno Valdetaro

Um poderoso html5 framework para construção de layouts inteligentes para sites com diferentes larguras de telas, essa é a premissa do Less Framework desenvolvido por Joni Korpi e distribuído sobre Creative Commons.

Less Framework é um framework (dã) CSS para construção de layouts para web multi-flexível. Ele contém uma grid de oito colunas otimizado para um line-height de 24px, bem como um conjunto de presets para tipografia com base no número de ouro que se encaixam em ritmo vertical da grid.

Less Framework funciona perfeitamente no Chrome, Safari 3.0+, Firefox 3.0+ e Internet Explores 7+. E se ajusta inteligentemente em uma única coluna em navegadores de dispositivos com tela pequena.

CSS3 - Border-radius / Cantos arredondados »

05dez 2009, às 08:08

Publicado em HTML / CSS | Deixe o seu comentário (2) »

publicado por: Magno Valdetaro

Com a CSS3 a W3C oferece algumas novas opções, das quais uma boa é a propriedade border-radius. O Mozilla Firefox e Safari 3+ já implementaram está função, que permite criar cantos arredondados: Veja um exemplo:

O código para este exemplo acima é bem simples:

Os cantos podem ser tratados de maneiras individuais e com formas diferente para os mozilla tem sua própria maneira de tratar está propriedade diferente do que é a especificação. No mozilla Firefox é tratado com -moz-border-radius-topright , já para os navegadores que utilizam o webkit como renderizador -webkit-border-top-right-radius:

Propriedades para cada canto no mozilla e webkit:

• -moz-border-radius-topleft / -webkit-border-top-left-radius
• -moz-border-radius-topright / -webkit-border-top-right-radius
• -moz-border-radius-bottomleft / -webkit-border-bottom-left-radius
• -moz-border-radius-bottomright / -webkit-border-bottom-right-radius

Transparência com CSS em todos os navegadores »

03dez 2009, às 07:09

Publicado em HTML / CSS | Seja o primeiro a comentar (0) »

publicado por: Magno Valdetaro

A transparência é um interessante e prático recurso da CSS e faz parte do grupo de propriedades que são tratadas completamente diferente dependendo do navegador. Para fazer com que cada navegador, interprete corretamente são necessárias 4 declarações CSS distintas. Que com a graça do nosso Senhor Jesus Cristo, amém, não interferem uma nas outras. Use como desejar, só cuidado para não gerar muita confusão, aqui vai um exemplo de transparência em 50%:

.transparência_class {
	filter:alpha(opacity=50);
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
}

Entenda o que é cada uma dessas propriedades CSS:

filter: alpha (opacity = 50); Está é própria para o IE.

-moz-opacity:0.5; Com está propriedade você dá suporte as versões antigas do Mozilla.

-khtml-opacity: 0.5; Está é a forma para as versões antigas do Safari (1.x), de quando o motor de redenrização que era usado ainda era referido como KTHML, diferente do webkit que é hoje. Mas continua funcionado nos navegadores Safari atuais.

opacity:0.5; Este é o mais importante, porque é o padrão atual no CSS. Está propriedade irá funcionar na maioria das versões do Firefox, Safari e Opera. Está seria a única propriedade necessária se todos os navegadores dessem suporte aos padrões atuais. Adivinha quem está no furo??

xCSS - Framework CSS orientado a objeto »

15out 2009, às 10:42

Publicado em Framework HTML / CSS Recursos | Seja o primeiro a comentar (0) »

publicado por: Magno Valdetaro

xCSS é um framework CSS que permite que você trabalhe orientado a objetos e mantenha um fluxo de trabalho simples no desenvolvimento de CSS complexas. Usar o xCSS reduz significativamente o tempo de desenvolvimento e te oferece: uma visão intuitiva da estrutura global da CSS, utilização de variáveis, reutilização e diversos outros recursos uteis. xCSS é leve e se integra a qualquer fluxo de trabalho e mantém seu HTML semântico.

Compatibilidades da CSS com Internet Explorer 6, 7 e 8 »

13out 2009, às 08:51

Publicado em HTML / CSS Recursos | Seja o primeiro a comentar (0) »

publicado por: Magno Valdetaro

Conhecer a compatibilidade da CSS tornou-se uma tarefa muito importante hoje em dia para webdesigners e desenvolvedores. A cada nova versão do Internet Explorer (arrepios) o suporte a CSS tem melhorado.

Cheat Sheet para Webdesigners »

24set 2009, às 08:56

Publicado em Recursos | Seja o primeiro a comentar (0) »

publicado por: Magno Valdetaro

Posso afirmar que você não lembra de todos os atributos, classes, tags, funções e atalhos que todo desenvolvedor web precisa conhecer no dia a dia, certo ou errado?

É aí que entra uma Cheat Sheet, uma “colinha”, para te ajudar naquele momento em que a memória falhar (tá lembrando do colégio?). A Cheat Sheet é um documento que contém as informações mais básicas sobre um software, linguagem e por aí vai.