O Grid System Generator é uma útil ferramenta desenvolvida por Ewout Kozel e que lhe permitirá gerar rapidamente sistemas de grelha (grid systems) em css/xhrml válido poupando assim tempo de prototipagem e desenvolvimento.

Sempre que gera uma nova grelha a aplicação cria um ficheiro comprimido onde poderá encontrar instruções, um ficheiro de imagem (PNG) que poderá utilizar como plano de fundo aquando do desenvolvimento do interface e, claro está, todo o CSS necessário e correspondente à grelha gerada.

O Grid System Generator é baseado no 960 Grid de Nathan Smith.

Boas grelhas.

Posts relacionados:

1. Spam Proof eMail Generator – Proteja o seu endereço de email. O Spam Proof eMail...
2. FX, The Effect Generator! O The Effect Generator...
3. 10 tutoriais para o desenvolvimento de temas Wordpress. O Vandelay preparou um...

Para além das novidades do HTML 5 faladas aqui, há também o CSS3.

Este, traz também uma lista imensa de novidades, são elas:

• tag Border-image: utilizando imagens para os borders:  com esta nova propriedade conseguimos agora colocar imagens nos borders, em vez de apenas cor. Com esta tag, nascem também a border-image e border-corner-image;

• tag Border-radius: para criar cantos redondos sem imagens: esta é uma função que está já embutida nos browsers que respeitam os web-standards, ou seja, Firefox 3 e Safari. Não, o IE não está incluído no lote;

• está vai dar imenso jeito, backgrounds múltiplos numa página: consiste apenas separar os backgrounds por virgulas, quando estamos a defini-lo para uma determinada box ou div. Exemplos? Pensem em transparências e poupamos logo3 divs. Só ainda o Konqueror suporta esta função;

• possibilidade de usar não só cores em RGB como em HSL, e ainda com o atributo alpha. Isto é óptimo para trabalharmos com transparências, podem ver aqui um exemplo;

• Para ficarmos por aqui, deixo a função por que mais eu espero, e que muitos devem esperar também. O que falo é sobre a possibilidade de se poder embutir fontes no CSS para serem apresentadas no browser quer o utilizador as tenha instalado ou não. Ou seja, podemos definir um determinado texto com a fonte Helvetica (que não vem por definição com o Windows XP pelo menos) mas o utilizador vê a fonte renderizada. Isto é um enorme avanço que os webdesigers irão de certeza gostar, até porque um bom design é 95% de tipografia, e 5% de gráficos.

Para saberem mais informações sobre CSS3, podem visitar o www.css3.info

Valério Vaz

Posts relacionados:

1. A programar para Web 2.0 (parte I) A Internet avança, em...
2. Inspiração – 10 footers diferentes para o seu site. Foi elaborado pelo 81...
3. CSS Menu Builder – Faça menus rapidamente Com o CSS Menu...

Na base de cada página web, está o HTML que também sofre alterações periodicamente. A versão mais usada, com já mais de uma década, é o HTML 4. Com a necessidade de inovar, surge agora melhoramentos notáveis com – a ainda em desenvolvimento – versão 5.

Entre muitas outras, as funcionalidades novas são:

• tag <section> - representa um documento genérico ou secção de aplicação. Pode ser usado com as tags <h1>;<h6> para indicar a estrutura do documento.
• tag <article> - representa uma secção do conteúdo independente do documento, tal como um post no blog.
• tag <aside> - representa uma secção do conteúdo que é relacionada com o resto da página
• tag <header> - representa um cabeçalho de uma secção
• tag <footer> - representa o rodapé de uma secção e pode conter informação sobre o autor, copyright. etc.

• tag <nav > – representa uma secção de navegação pelo documento

Podem ver no W3, uma secção onde explica pormenorizadamente as diferenças entre o 4 e o 5.

O novo HTML 5 também deixa para trás elementos que devem ser usados com o CSS. Por exemplo a tag <font> deixa de existir, tal como a tag <center> e <frame>

Na parte II vou abordar a nova versão do CSS3

Autor: Valério Vaz (www.valeriovaz.com)

Posts relacionados:

1. A programar para web 2.0 (parte II) Para além das novidades...
2. Cownt Us – Brinquedos novos para o seu site. Não um mas dois...
3. Alternativas para quando não conseguir aceder ao Gmail. Não se trata de...

Em muito poucas palavras o PXtoEM é: um conversor de PX (pixel) em EM.

Tudo o que tem que fazer é inserir o seu valor de base para o tamanho da fonte a utilizar e a conversão ser-lhe-á apresentada na tabela subsequente. Poderá também fazer uso da folha de estilo (CSS) gerada pela ferramenta.

Simples e terrivelmente eficaz.

Na mesma linha, mas menos sofisticado, deixo-lhe também o EM Calculator.

Boas conversões.

:.:::.

Posts relacionados:

1. Tu-dus – Gestor de tarefas tão simples quanto possível Tu-dus é um projecto...
2. Mathway – A matemática nunca foi tão simples. Pois parece que é...
3. Unscrew America – Tão simples como trocar uma lâmpada. Para lá da pouco...

O Smashing Magazine continua a senda de grandes compilações e a presente referência também não fará a excepção. Desta vez são 100 templates X(HTML)/CSS de altíssima qualidade que passam a estar ao alcance de um clique.

O denominador comum é a qualidade e o propósito a tentativa de equilibrar as coisas no que à atenção diz respeito. Normalmente os temas para WordPress levam todos os destaques mas desta vez as coisas tomam outro rumo. A compilação é (ou tenta ser) simultaneamente uma excelente forma de poupar algum tempo no desenvolvimento das suas criações.

Boas inspirações.

:.:.::

Posts relacionados:

1. 45+ templates e ficheiros PSD. O 1st Webdesigner publicou,...
2. 25 templates PSD para download livre A compilação é do...
3. Templates de t-shirts para a sua loja online Por nem toda a...

Depois do “Photoshop Anthology” (publicado em Maio deste ano) a Sitepoint faz-lhe agora a oferta de ainda mais um livro em formato PDF, inteiramente gratuito. Desta vez trata-se do “The Art and Science of CSS”, tem mais de 200 páginas, 23MB e foi escrito por Cameron Adams, Jina Bolton, David Johnson, Steve Smith e Jonathan Snook.

Há então duas formas de conseguir este livro:

1. Seguir o Sitepoint no Twitter. Assim que atingir os 10 000 followers ser-lhe-á enviada uma mensagem directa com o link.

2. Inserir o seu endereço de email nesta página e esperar o link via email. Esta segunda opção é bem mais rápida (5 minutos) mas tem o inconveniente de expor o seu email a tudo o que possa calhar.

:.:….

Actualização: Não será necessário que o número de followers chegue aos 10 000. Já recebi a DM assim como a mensagem via email.

Posts relacionados:

1. Download gratuito do Camtasia Studio…com chave de registo e tudo! Depois de há pouco...
2. Descarregue o The Photoshop Anthology gratuitamente! Hoje de madrugada chegou...
3. Command & Conquer Red Alert – Download gratuito! Como forma de comemorar...

O LibrosWeb.es é um interessante projecto de divulgação que lhe permite o acesso a, para já, sete livros de interesse geral para web developers, sobretudo se iniciados. Os livros podem ser lidos online, sem restrições ou reservas.

Por enquanto poderá ler:

- Referência completa de CSS 2.1;

- Introdução às CSS;

- Simfony, o guia completo;

- Introdução ao Ajax;

- Introdução ao Javascript.

Os trabalhos usufruem da protecção de uma licença Creative Commons e seriam perfeitos não fosse o facto de serem escritos em castelhano. Que não seja isso que o impedirá de usufruir de tal oferta.

Boas leituras.

:.:.:

Posts relacionados:

1. Dezenas de livros de Comunicação grátis para download! Cheguei tarde, não dei...
2. Biblioteca de Livros Digitais está online Já está online a...
3. FreeTechBooks – Livros Técnicos Para Todos os Bolsos Não é novo mas...

Com o CSS Menu Builder você pode fazer os seus menus CSS sem complicações no conforto do browser. É uma aplicação web excelente. Existem mais de 30 menus horizontais e verticais, que poderão transforma-se numas incríveis 1000 combinações diferentes (não contando com as de cores).

É uma aplicação em flash, que permite escolher o estilo, a orientação e as cores do nosso menu em CSS.

Quando acabarmos de o “decorar” , podemos fazer o download (copy/paste) do código HTML e CSS, assim como também das imagens que o menu tem associadas. Se acharmos que é muita complicação, apenas se pode clicar no “download” e guardamos os ficheiros todos empacotados num *.zip.

É rápido e é à borla e já está nos meus favoritos!

Valério Vaz

Posts relacionados:

1. IzzyMenu – A forma mais simples de criar os seus menus. Na mesma linha do...
2. Curbly – Faça você mesmo…com uma preciosa ajuda! Se é daquele(a)s que...
3. CSS Builder – Os seus CSS num instante! O MetaTitan disponibiliza neste...

São 70 os componentes criteriosamente escolhidos pelos editores do DevKick e que deverão fazer as delícias da grande maioria dos web developers.
Numa acção que apresenta sérias probabilidades de vir a repetir-se no futuro, foi então publicada uma compilação denominada “Milestone 01 – 70+ High-end Components for Web designers and developers” e que não vai certamente querer perder.

So here is Milestone 01 – a handy collection of hand-picked, quality components sorted in framework/programming categories with the most popular component presented first in each category. Note that these components have been selected and tested during the last three months times to make sure each meets a certain quality criteria. Enjoy!

Boas selecções.

.:..:::

Posts relacionados:

1. +100 Recursos para web developers Ainda ontem eram 99...
2. 160+ feeds RSS para web designers e developers. Bem sei que o...
3. Corkdump – Algumas dezenas de recursos para Web Designers. O Corkdump é uma...

O PTInspired é algo que há muito tempo desejava ver criado em Portugal. É certo que existem pela web uma infinidade de galerias CSS & Flash, algumas inclusivamente, destacadas por diversas vezes no 2.0 Webmania mas, verdade seja escrita, gosto destes projectos mais locais. Gosto das galerias nacionais e das listas de projectos que nos vão oferecendo uma visão mais pormenorizada do grau de evolução (ou falta dela) e qualidade do que por cá se faz.

Nas palavras do autor, Anselmo Ribeiro,

Ptinspired orgulha-se de ser a primeira galeria web portuguesa, seguindo a norma do que é nacional é bom. A apesar de existirem centenas de galerias do género por esse mundo fora, esta é diferente no seu propósito.

O objectivo é “separar o trigo do joio”, ou seja, fazer uma distinção clara do que é profissional daquilo que apenas parece profissional.

O site abrange todas as categorias em que os sites se possam inserir, dos blogs aos portais. Todos quantos quiserem poderão submeter os seus projectos para avaliação. Chamo ainda a sua atenção para a nuvem de tags que assume neste projecto a forma de uma nuvem de cores, uma forma muito interessante de etiquetar cada projecto.

Vale certamente uma visita e o marcador.

.:…::

Posts relacionados:

1. Autodesk Project Dragonfly – a melhor opção no segmento… nas calmas! O Project Dragonfly é...
2. Gustavo Pimenta no “Portugal 2.0 no ano de 2008″ (parte VIII) O Gustavo Pimenta é,...
3. Votação Web2.0 em Portugal Post Original:Está presente na...